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!
--
Hosts
* Alexander Lichter
* KZfaq - @TheAlexLichter
* Twitter - / thealexlichter
* Web - www.lichter.io/
Michael Thiessen
* Twitter - / michaelthiessen
* Web - michaelnthiessen.com/
--
Chaptermarks:
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 v3.vuejs.org/guide/teleports....
▶ Headless UI github.com/tailwindlabs/headl...
▶ The Dialog Element developer.mozilla.org/en-US/d...
▶ Popovers (Now available) developer.mozilla.org/en-US/d...
▶ Portal Vue package (needed in Vue 2) github.com/LinusBorg/portal-vue
▶ Evan on SSR Teleports github.com/vuejs/core/issues/...
▶ #teleports in Nuxt github.com/nuxt/nuxt/pull/25043
▶ Suspense + Teleports Issue github.com/vuejs/core/issues/...
--
Follow DejaVue on
▶ The Web: dejavue.fm/
▶ Twitter: / dejavuefm
▶ Apple Podcast: podcasts.apple.com/us/podcast...
▶ KZfaq: / @dejavuefm
▶ Spotify: open.spotify.com/show/5VQ15QH...
▶ Deezer: www.deezer.com/show/1000792252
▶ Amazon Music: music.amazon.com/podcasts/798...
▶ Pocket Casts: pca.st/49qr8d1k