An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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.
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> <body> <div id="app"> <!-- Other injected HTML here --> <div class="loader"> <!-- HTML for the loader goes here --> </div> </div> </body></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> <body> <div id="app"></div> <!-- built files will be auto injected --> <div class="loader"></div> <!-- loader component will be injected here --> </body></html>
Once you've done that, go to your .vue
file and use the teleport component:
<template> <teleport to=".loader" v-if="showLoader"> <Loader /> </teleport> <!-- The logic of your component goes below --></template>
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: <teleport to="#loader" v-if="showLoader">
If you found it useful, please like, subscribe, and share the knowledge.
You might like what I share on my Twitter too.
Original Link: https://dev.to/eligarlo/how-to-teleport-in-vue-3-1a9e
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To