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 ResourcesTeleports Vue.js DocsHeadless UIThe Dialog ElementPopovers (Now available)Portal Vue package (needed in Vue 2)Evan You on SSR Teleports#teleports in NuxtSuspense + Teleports Issue