randolphtellis/vue3-transitions

Reusable Vue 3 components

DEMO

Install

npm i vue3-transitions
or
yarn add vue3-transitions

Usage

Demo code can be found under the docs section here.

Import globally

import { createApp } from 'vue'
import App from './App.vue'
import Vue3Transitions from 'vue3-transitions'

const app = createApp(App)
app.use(Vue3Transitions)
app.mount('#app')

Router view

Vue recommends using a transition mode - more info here

<template>
  <router-view v-slot="{ Component }">
    <FadeInOut entry="left" exit="left" :duration="500" mode="out-in">
      <component :is="Component" />
    </FadeInOut>
  </router-view>
</template>

<script>
import { defineComponent } from 'vue'
import { FadeInOut } from 'vue3-transitions'

export default defineComponent({
  components: { FadeInOut }
})
</script>

As a component

<template>
  <button @click="triggerFade = !triggerFade" >
    Trigger animation
  </button>
  <FadeInOut entry="left" exit="left" :duration="500">
    <h1 v-if="triggerFade">Fade in and out transition</h1>
  </FadeInOut>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { FadeInOut } from 'vue3-transitions'

export default defineComponent({
  components: { FadeInOut },
  setup() {
    const triggerFade = ref(false)
    return {
      triggerFade
    }
  }
})
</script>

Tree Shaking

Import components from the esm folder to enable tree shaking.

<script>
import { defineComponent } from 'vue'
import { FadeInOut } from 'vue3-transitions/esm'

export default defineComponent({
  components: { FadeInOut }
})
</script>

Available components

1. FadeInOut - Single, Group
2. SlideInOut - Single, Group
3. ZoomInOut (coming soon)
4. RollInOut (coming soon)

...plus more coming soon