Shared Component Across Routes With Animations - Vue Starport

Install & Download:

# NPM
$ npm i vue-starport

Description:

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>