Shared Component Across Routes With Animations – Vue Starport

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