import { createApp } from 'vue' import App from './App.vue' import Vue3Transitions from 'vue3-transitions' const app = createApp(App) app.use(Vue3Transitions) app.mount('#app')

<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>

<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>

<script> import { defineComponent } from 'vue' import { FadeInOut } from 'vue3-transitions/esm' export default defineComponent({ components: { FadeInOut } }) </script>