Teleports and When to Use Them

Welcome to the fourth episode of DejaVue! From a Nuxt topic last week, Michael and Alex jump into a plain Vue.js topic again, or would you say... teleport?
Yes, correct! The Teleports feature from Vue 3 will be explored - from its use cases to the native HTML dialog tag. The two hosts also cover how Teleports were created, even back in Vue 2, and talk about a Nuxt implementation too.

Learn more about Teleports in this episode of DejaVue!

Post-podcast note: The Popover API is now available in all major browsers!

Chapters

• (00:00) - Intro
• (00:35) - What are Teleports?
• (01:35) - The typical Teleport use case
• (03:23) - Other use cases for Teleports (1)
• (06:45) - Async Components and Suspense (1)
• (07:48) - Pitfalls with Teleports
• (09:15) - The native dialog components
• (12:14) - Building an own modal / dialog
• (13:25) - How you did it before Teleports
• (14:33) - What Teleports don't solve
• (15:13) - Other use cases for Teleports (2)
• (16:46) - Teleport targets / Where to teleport
• (17:49) - Vue 2 Teleports
• (19:04) - Teleports and SSR
• (25:13) - Creating Reproductions and Open Source
• (29:28) - Outro

Links and Resources

• Teleports Vue.js Docs
• Headless UI
• The Dialog Element
• Popovers (Now available)
• Portal Vue package (needed in Vue 2)
• Evan You on SSR Teleports
• #teleports in Nuxt
• Suspense + Teleports Issue
  
  

Creators & Guests

Host

Alexander Lichter

Web Engineering Consultant • Founder • Nuxt team • Speaker

Host

Michael Thiessen

Full-time Vue educator

Editor

Niki Brandner

Sound Engineer

What is DejaVue?

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.