The page transition property

Nuxt uses the component to let you create amazing transitions/animations between your pages.

  • Type: String or Object or Function

To define a custom transition for a specific route, simply add the transition key to the page component.

  1. export default {
  2.   // Can be a String
  3.   transition: ''
  4.   // Or an Object
  5.   transition: {}
  6.   // or a Function
  7.   transition (to, from) {}
  8. }

String

If the transition key is set as a string, it will be used as the transition.name.

  1. export default {
  2.   transition: 'test'
  3. }

Nuxt will use these settings to set the component as follows:

  1. <transition name="test"></transition>

Object

If the transition key is set as an object:

  1. export default {
  2.   transition: {
  3.     name: 'test',
  4.     mode: 'out-in'
  5.   }
  6. }

Nuxt will use these settings to set the component as follows:

  1. <transition name="test" mode="out-in"></transition>

The transition object can have the following properties:

keyTypeDefaultdefinition
nameString“page”The transition name applied on all the route transitions.
modeString“out-in”The transition mode applied on all routes, see Vue.js documentation.
cssBooleantrueWhether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events.
durationIntegern/aThe duration (in milliseconds) applied on the transition, see Vue.js documentation.
typeStringn/aSpecify the type of transition events to wait for to determine transition end timing. Available values are “transition” and “animation”. By default, it will automatically detect the type that has a longer duration.
enterClassStringn/aThe starting state of the transition class. See Vue.js documentation.
enterToClassStringn/aThe ending state for the transition. See Vue.js documentation.
enterActiveClassStringn/aThe class applied across the entire transition duration. See Vue.js documentation.
leaveClassStringn/aThe starting state of the transition class. See Vue.js documentation.
leaveToClassStringn/aThe ending state for the transition. See Vue.js documentation.
leaveActiveClassStringn/aThe class applied across the entire transition duration. See Vue.js documentation.

You can also define methods in the page transition property, these are for the JavaScript hooks:

  • beforeEnter(el)
  • enter(el, done)
  • afterEnter(el)
  • enterCancelled(el)
  • beforeLeave(el)
  • leave(el, done)
  • afterLeave(el)
  • leaveCancelled(el)
  1. export default {
  2.   transition: {
  3.     afterLeave(el) {
  4.       console.log('afterLeave', el)
  5.     }
  6.   }
  7. }

Note: it’s also a good idea to explicitly add css: false for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.

Transition Mode

The default transition mode for pages differs from the default mode in Vue.js. The transition mode is by default set to out-in. If you want to run leaving and entering transitions simultaneously, you have to set the mode to the empty string mode: ''.

  1. export default {
  2.   transition: {
  3.     name: 'test',
  4.     mode: ''
  5.   }
  6. }

Function

If the transition key is set as a function:

  1. export default {
  2.   transition(to, from) {
  3.     if (!from) {
  4.       return 'slide-left'
  5.     }
  6.     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  7.   }
  8. }

Transitions applied on navigation:

  • / to /posts => slide-left,
  • /posts to /posts?page=3 => slide-left,
  • /posts?page=3 to /posts?page=2 => slide-right.