Hello and welcome to the fifth video in
the vue 3 series
if you haven't watched any of the
previous videos in this series I
recommend you go back and take a look as
they may be useful
in this video we'll be taking a look at
the new component
to view called teleport.
Vue encourages the use of building UI
components inside of each other
that builds a tree to make up your
application. This design
satisfies the majority of usecases
however this is not always desirable.
Sometimes the logic makes sense to keep
in one component
but the element should be displayed
elsewhere on the DOM or maybe even
outside of the Vue app itself
a common case for such components is a
modal in most cases you want the logic
to be with a component
inside your app but the html elements to
be displayed
elsewhere in the dom like before the
closing tags at the end of a file.
This would simplify the css needed to
get the modal to display correctly
in Vue 2 you would need a library like
vue-portal to do this for you.
But in Vue 3 they have added this right
into the Vue framework!
In this video we'll be taking a look at
this new api with a few examples and
hopefully gain an understanding of how
to use it
and how it can be used in your
application.
I've gone ahead and created a view
component called component a
that lives inside of our Vue app. I've
also added a div at the end of the body
to our index.html which contains our
Vue application.
In this example we'll be taking the text
from component a
and teleporting it into the div at the
end of the body.
To do this we will need to wrap our
paragraph in the teleport element.
We will also need to specify the two
property to tell view where the
component is gonna go.
In our example our two property will be
hashtag end of body
to indicate the div that has that ID.
As you can see both visually and by
looking at the DOM
the paragraph has been moved into the
end of body div.
The two property accepts any dom query
selector.
This means you can use other properties
than just ID to select the element you'd
like to teleport into.
You could also use a class like so,
or a data selector with square brackets.
The teleport element has a second prop
called disabled.
When this value is true it will stop the
teleporter from teleporting its elements
to its desired location.
Let's visualize this by creating a
button that will toggle this option
on and off. Let's start by creating a
reactive variable inside the setup
function.
Now we can toggle this value on and off
each time the button is clicked.
Once we pass this variable into the
disabled property
you can see that it will bring the data
in and out of component A.
[Music]
If you want the element to not show at
all you can use a v-if
instead. Now whenever we click the toggle
it will hide and show the element.
Very cool but but what happens if we
teleport two elements to the same target.
Well let's take a look and see. I'll
quickly add a second teleport and button
for toggling it...
and would you look at that view
perfectly handles the ability to
teleport multiple elements into the same
location.
Well that's the end of this video I hope
you enjoyed it and thank you for
watching!
If you enjoy this kind of content don't
forget to subscribe to my channel and
hit the thumbs up
button
