Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marchantweb/nuxt-adaptive-teleport
<AdaptiveTeleport> is a variation of Vue's <Teleport> component that adapts to Nuxt page route changes.
https://github.com/marchantweb/nuxt-adaptive-teleport
nuxt teleport
Last synced: 14 days ago
JSON representation
<AdaptiveTeleport> is a variation of Vue's <Teleport> component that adapts to Nuxt page route changes.
- Host: GitHub
- URL: https://github.com/marchantweb/nuxt-adaptive-teleport
- Owner: marchantweb
- Created: 2024-10-18T00:15:59.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2024-10-18T01:33:54.000Z (29 days ago)
- Last Synced: 2024-10-20T13:39:55.048Z (27 days ago)
- Topics: nuxt, teleport
- Language: Vue
- Homepage: https://www.npmjs.com/package/nuxt-adaptive-teleport
- Size: 507 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Nuxt Adaptive Teleport
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
`` 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 ``, you can ensure that the component is only mounted once, and is simply moved around the DOM you navigate between pages.
## Quick Setup
Install the module to your Nuxt application with one command:
```bash
npx nuxi module add nuxt-adaptive-teleport
```
## Usage
The `` component can be used in your layouts, or in `app.vue` - anywhere above the `` component.On each page where you want to display the component, you drop in an element DOM element with your choice of ID.
```vue
```
## Contribution
Local development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-adaptive-teleport/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-adaptive-teleport
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-adaptive-teleport.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-adaptive-teleport
[license-src]: https://img.shields.io/npm/l/nuxt-adaptive-teleport.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-adaptive-teleport
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com