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.


  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);}


  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.