Use Vue Teleport to Make Modals and Popups

[@DontFollowZim]

Short and to the point. Love it. You may not hit things with a lot of depth, or you might fly through something before it soaks into someone's head sometimes, but the conciseness means they have time to rewatch it multiple times until it clicks. Love your style.

[@ransela6139]

I tend to do most of my vue learning/referencing in the docs as most video tuts rob one of time.. but your videos are complete and concise.. thank you and well done! I'm sure your channel will grow in no time at all.

[@LearnVue]

thank you - im making the kinds of videos i like to watch and glad you like them too!

[@RaphaelDDL]

I totally agree with that statement. Some parts might show a bit quickly but we have a pause button for that if we need to slowly read. and even so, when it's fast, it's just because isn't the main focus of the video, like the styling for example. So in short, it is well explained and at great pace. I'm loving these videos.

[@cheryl_jones]

I watched this video a few times to get my head around it. I've finally put the pieces together and can display all of my form components in modals now. Thanks so much for simplifying this!

[@OdwallaJuice]

Great explanation, thanks! I just used this feature on a modal implementation thanks to this video. One method I use to keep things organized is create a div with id="modals" after the #app div in the index.html file. Then I just put my inside the modals component. That way, no matter how many modals I need, they all get teleported inside the same container in the DOM. I can then do the same with popovers using a id="popovers" container. Super handy :)

[@LearnVue]

that's awesome! i love the idea of using that to organize your code!

[@jgonzo-san]

I'll have to try this out. I've created modals before but had a much more verbose way of doing it, using various watchers, vuex, etc to basically do the same thing. This seems easier to manage, thanks for the video!

[@codewithguillaume]

God this helped me so much thank you guys :)

[@chintanpurohit1987]

Keep making such knowledgeable videos

[@leob.699]

Very cool and exciting video. I think it will be useful to me. Thank you👍

[@LearnVue]

glad to hear! i think teleport is so cool 😀

[@BukanDicki]

Great explanation, keep making video bro👍

[@expresstutorial3255]

Wonderful, i want to learn more vue 3

[@wesamnajjom6995]

Is there a problem with teleport and vue router?, when i go to other routes they are empty

[@ColinRichardson]

We have done something like this for Vue2 but in a MUCH more cumbersome way.. But, the only advantage we have is we have had to make our own singleton-stacking system where we can show each modal one at a time. (Usually because we have a modal open a modal, open a modal). I am hoping we can cobble the thing to make use of this technique..

[@LearnVue]

ooh that sounds interesting! i wonder if implementing a singleton-stacking system with some extracted composition api logic and teleport would also work

[@DontFollowZim]

While this is a cool programming conundrum to solve, it sounds to me like it would be better for you to work on changing your UX to use fewer modals

[@ColinRichardson]

@@DontFollowZim not gonna happen. The structure of the data and nesting is designed dictated by our users. They can choose to make things in any order, and we must account for it.

[@anhvu3780]

where is the code for this teleport demo?

[@Akosiyawin]

This is awesome

[@lucakim27]

wheres the source code

[@chikenmacnugget]

Looks like a bad practice.

[@truthteachers]

Rubbish. Are you trying to catch a rocket. Done just for views.

[@killemalljustice]

Useless comment, a s s h o l e