The pageTransition and layoutTransition options

The pageTransition and layoutTransition options are used to customize the default properties of the page and layout transitions in your Nuxt app. The default properties for the page transition are set as follows:

{
  name: 'page',
  mode: 'out-in',
  appear: false,
  appearClass: 'appear',
  appearActiveClass: 'appear-active',
  appearToClass: 'appear-to'
}

The default properties for the layout transition are set as follows:

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

You can change them as follows:

// nuxt.config.js
export default {
  pageTransition: {
    name: 'fade'
  },
  layoutTransition: {
    name: 'fade-layout'
  }
}

We will cover these options in more detail in Chapter 4, Adding Views, Routes, and Transitions.