# How to Teleport in Vue 3
A few days ago I decided it was time for me to update myself to the new version of Vuejs, Vue 3. And today I wanted to share with you the first thing I learn that version two didn't have, the `teleport` component.
It's well known that modern web applications fit in a div.
%[https://twitter.com/adrian_twarog/status/1346423883285499904]
Ok, React uses `#root` and Vue uses `#app` but they just do the same, which is inject the JavaScript code into that div. So here it comes the question:
## What if I have an element I want to display as a sibling of the `#app` element in the html?
Sometimes we have a loader or a modal (aka popup) component that is not part of the app, but anyway, it will be injected inside the `#app` element. Thus, the html will look like this:
```html
```
### Let's teleport!
To use the teleport component in your app, you need to first, add a sibling to the `#app` element in the html.
```html
```
Once you've done that, go to your `.vue` file and use the teleport component:
```html
```
And that's it. Now, when the showLoader condition is met, the loader will show in the specified html element. Notice that I used a CSS selector so if the element was an id, I could have done it like this: ``
> If you found it useful, please like, subscribe, and share the knowledge.
> You might like what I share on [my Twitter][Twitter profile] too.
[Twitter profile]: https://twitter.com/eligarlo