Teleports and When to Use Them DejaVue
-
- Technology
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 DocsHeadless UIThe Dialog ElementPopovers (Now available)Portal Vue package (needed in Vue 2)Evan You on SSR Teleports#teleports in NuxtSuspense + Teleports Issue
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 DocsHeadless UIThe Dialog ElementPopovers (Now available)Portal Vue package (needed in Vue 2)Evan You on SSR Teleports#teleports in NuxtSuspense + Teleports Issue
30 min