DejaVue

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
* CZcams - @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...
▶ CZcams: / @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

[@Saeid-Za]

Thanks ! Great content as always ❤
One limitation with Teleport that made me avoid it for some time, that is well documented in the docs:
"The teleport to target must be already in the DOM when the component is mounted."
Unfortunately in most cases, my "host" element is not ready on mount, but is ready some ticks after the "guest" is mounted (not shown of course).
For this reason, I've been avoiding teleport and been using "portal-vue" or "safe teleport" packages.
I hope that this would be implemented in the core.

[@TheAlexLichter]

Oh yes, good point there! Did you ever raise a Vue issue on that by any chance?

[@Saeid-Za]

@@TheAlexLichter oh, I'd never thought of that!
Will create one soon!

[@ElFerBlocks]

Let's use. There are a lot of caracteristics and options for learn . I have been stunding and programing VUE since 21 and I can't finish to study

[@DejaVueFm]

Always new things to discover!