The Vue Starport allows you to have the same component across different routes (pages), with smooth animations when navigating between them.
Basic usage:
1. Import and register the Vue Starport.
import StarportPlugin from 'vue-starport' app.use(StarportPlugin())
2. Add the <StarportCarrier /> at the end of the DOM.
// app.vue import { StarportCarrier } from 'vue-starport' <template> <RouterView /> <StarportCarrier /> </template>
3. Wrap your component into the Starport
component in your pages.
// PageA.vue <script setup> import { Starport } from 'vue-starport' </script> <template> <div> <Starport port="my-id"> <MyComponent :prop="value"/> </Starport> </div> </template>
// PageB.vue <script setup> import { Starport } from 'vue-starport' </script> <template> <div> <Starport port="my-id"> <MyComponent :prop="value"/> </Starport> </div> </template>
Preview:
Changelog:
v0.4.0 (09/08/2023)
- bugfix
v0.3.0 (06/15/2022)
- bugfix
v0.2.11 (05/26/2022)
- bugfix
Download Details:
Author: antfu
Live Demo: https://vue-starport.netlify.app/
Download Link: https://github.com/antfu/vue-starport/archive/refs/heads/main.zip
Official Website: https://github.com/antfu/vue-starport
Install & Download:
# NPM
$ npm i vue-starport