How to make route transitions?

[Arturexe]

I'm trying to make a route transition (classes below are from tailwind):

<transition
      mode="out-in"
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
      enter-active-class="transition duration-3000"
      leave-active-class="transition duration-3000">
      <RouterView/>
</transition>

but it doesn't work for the first transition to a route (about) and only partly works with the back transition (home). In the second case the transition can be seen but takes about the time that it takes to load the component instead of 3 seconds.

How do I configure your package to render every router-view with a transition?

[jbaubree]

I think you can use:

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in">
    <component :is="Component" />
  </Transition>
</RouterView>

[Arturexe]

Perfect, it works! Thank you.

[Arturexe]

@jbaubree There seem to be one problem with this approach though. When the router-link is outside the router-view component, the routing doesn't seem to work properly, if a transition is present.

This component for example is getting stuck during page transition:

<template>
  <main class="bg-slate-900 text-slate-100">
    <router-link :to="`/`">Home</router-link>
    <router-link :to="`/feedback`">Halp</router-link>
    <router-view v-slot="{Component}">
      <transition
        mode="out-in"
        enter-from-class="opacity-0"
        leave-to-class="opacity-0"
        enter-active-class="transition duration-500"
        leave-active-class="transition duration-500">
        <component :is="Component"/>
      </transition>
    </router-view>
  </main>
</template>

After clicking a router-link the url changes but the new page is not rendered. A page reload renders the new page.

[jbaubree]

@Arturexe i think you are using a bad approach. Nothing has to be outside your routes (no main and no router-link). I think what you need is to use vite-plugin-vue-layouts. With this and vite-plugin-pages, you will be able to create your layout for all your pages content without getting out of your router-view.

[jbaubree]

With this plugin installed:

// src/layouts/default.vue
<template>
  <main class="bg-slate-900 text-slate-100">
    <router-link :to="`/`">Home</router-link>
    <router-link :to="`/feedback`">Halp</router-link>
    <router-view v-slot="{Component}">
      <transition
        mode="out-in"
        enter-from-class="opacity-0"
        leave-to-class="opacity-0"
        enter-active-class="transition duration-500"
        leave-active-class="transition duration-500">
        <component :is="Component"/>
      </transition>
    </router-view>
  </main>
</template>

// src/App.vue
<template>
  <router-view v-slot="{Component}">
    <transition
      mode="out-in"
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
      enter-active-class="transition duration-500"
      leave-active-class="transition duration-500">
      <component :is="Component"/>
    </transition>
  </router-view>
</template>