One UNIQUE Way to Use Teleport in Vue 3

Brilliant

Perfect for drag and drop of components

wooooah that was mind blowing

Thank you so much this helped a lot!!!! You saved my life

You rock! The place where I found use for Teleport in is when I want to display child content in parent/grandparent etc component. Example, actions bar in page component that has confirm/cancel buttons of child form, fixed at the top of page. Basically whenever I want to render in certain slots, but I dont want to spread the logic across multiple components.

BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!

thank you so much dude you're a god

thanks bro it's really help

I used it to create a backdrop on the parent's scope from a child component which was working as a general popup wrapper component 😅

Can i use :to conditionally?

Awesome!!!!

the content you created has been helpful man! keep going!

thanks for sharing :)

Good to get people thinking about other use cases for teleport, though I agree with other comments saying this should be done entirely with CSS. That said, I think a similar example that could only be done with teleports is injecting buttons/content from a child page into its parent layout. This approach avoids complex multi-component router config and allows page-specific code to be called from those buttons.

So amazing, thanks for all :))

Personally, I would solve it with CSS order instead unless sidebar contains something below ToC that would need to go below the article (e.g. ads, tags or related content)

I understand this is trying to showcase teleport but I would actually advise simply using css grid for this. You wouldn't need to declare anything twice or use any v-if conditions. You wouldn't even need an empty tagged div. Simply stack the title, article and aside as they are with an id and use grid-template-areas with an extra media query. This is one of those display areas where I really don't think we should use JS to solve something CSS is capable of handling.

don't mind me editing on my project literally every time you post something new.

love your videos.

Nice one, really good use case and demo!
Thanks for sharing! your videos keep getting better and better!