This is the module created in parallel to my "mighty bite" tip for Nuxt Nation '24.
<AdaptiveTeleport> works similarly to Vue's built-in component, but with the added benefit of being able to adapt to route changes, so it can persist children across pages without needing to re-mount them.
It works by using a watch on the route, as well as a Mutation Observer on the CSS selector for the teleport target, to know when to "refresh" the teleport instance.
The most common use case for this is for large, complex components that take a long time to mount, but that need to be within the page DOM of multiple pages. By using <AdaptiveTeleport>, you can ensure that the component is only mounted once, and is simply moved around the DOM you navigate between pages.
Description
This is the module created in parallel to my "mighty bite" tip for Nuxt Nation '24.
<AdaptiveTeleport>works similarly to Vue's built-inIt works by using a watch on the route, as well as a Mutation Observer on the CSS selector for the teleport target, to know when to "refresh" the teleport instance.
The most common use case for this is for large, complex components that take a long time to mount, but that need to be within the page DOM of multiple pages. By using
<AdaptiveTeleport>, you can ensure that the component is only mounted once, and is simply moved around the DOM you navigate between pages.Thanks!
Repository
https://github.com/marchantweb/nuxt-adaptive-teleport
npm
https://www.npmjs.com/package/nuxt-adaptive-teleport
Nuxt Compatibility
Nuxt 3