Nuxt 3 : Transitions don't work even though I have followed the docs

I have followed the docs on nuxt 3 transitions, but it just doesn't work.

Why it doesn't work

You need to put your transition css in app.vue, not in your global css.

Solution

1. Define your transition.

   export default defineNuxtConfig({    app: {        pageTransition: { name: 'page', mode: 'out-in' }    },})

2. Add your transition css to app.vue

   .page-enter-active,.page-leave-active {  transition: all 0.4s;}.page-enter-from,.page-leave-to {  opacity: 0;  filter: blur(1rem);}

Sources

1. Nuxt 3 docs - Transition

Written by lukeonuke.

Hobbyist computer programmer pursuing a informatics degree. Knows a thing or two about making computers beep and boop.