nuxt / nuxt/modules

[Module Listing Request]: `nuxt-adaptive-teleport`

Open
#1,097 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

module-request
Dominant language
TypeScript
Stars
1.1k
Forks
354
Avg merge
10h 18m
Merged PRs (30d)
12

Description

Description

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.

Thanks!

Repository

https://github.com/marchantweb/nuxt-adaptive-teleport

npm

https://www.npmjs.com/package/nuxt-adaptive-teleport

Nuxt Compatibility

Nuxt 3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the linked nuxt-adaptive-teleport repository and npm package, then inspect how this Nuxt modules project handles module listing requests. Confirm the module's Nuxt 3 compatibility and determine the project entry point for adding it; done means the module is correctly represented in the listing.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.