Vue Transitions

Para utilizar diferentes transiciones en diferentes páginas en Nuxt hay que hacer la siguiente configuración:

En el archivo nuxt.config.ts

Añadir el siguiente objeto dentro de app

    pageTransition: {
      name: 'fade',
      mode: 'in-out',
    },

Esto aplica la transición fade a todas las páginas del proyecto, con el modo in-out

¿Qúe es ese fade?

En el archivo vueTransitions.css están todas las transiciones que vamos a crear

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

Como se ve en el código, todas las clases empiezan por la palabra fade que hace referencia al name: fade que hay en el nuxt.config.ts. Documentación oficial de las Vue Transitions

Aplicar una transición diferente en una página

Para aplicar una transición diferente en una página, tenemos que añadir en el <script setup> el siguiente código:

definePageMeta({
  pageTransition: {
    name: "enter-blog",
    mode: "in-out",
  },
});

Sigue la misma lógica que en nuxt.config.ts, el name hace referencia a la clase como hemos visto más arriba. De esta forma estamos aplicando el siguiente efecto que está en vueTransitions.css

.enter--enter-active,
.enter--leave-active {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease, rotate 1s ease;
}
.enter-blog-enter-from,
.enter--leave-to {
  opacity: 0;
  transform: translate(20em, -20em);
}

Documentación oficial de transitions en Nuxt