Making transitions with the pageTransition property

In Nuxt, the <transition> component is not needed anymore. It is added for you by default, so you just have to create transitions in the /assets/ directory or the <style> block on any specific page. The pageTransition property is used in the Nuxt config file to set the default properties of page transitions. The default values for the transition properties in Nuxt are as follows:

{
  name: 'page',
  mode: 'out-in'
}

So, Nuxt prefixes the transition classes with page- by default, as opposed to Vue, which uses v- as the prefix. The default transition mode is set to out-in in Nuxt. Let's see how transitions are done in Nuxt by creating a global transition for all pages and a local transition for a specific page with the following steps:

1. Create a transition.css file in the /assets/ directory and add the following transition to it:

// assets/css/transitions.css
.page-enter,
.page-leave-to {
  opacity: 0;
}
...