API: The page transition Property

• Type: String or Object or Function

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

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

export default {
  transition: 'test'
}

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

export default {
  transition: {
    name: 'test',
    mode: 'out-in'
}

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

The transition object can have the following properties:

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)
• leaveCancelled(el)

export default {
  transition: {
    afterLeave(el) {
    }
  }
}

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: ''.

If the transition key is set as a function:

export default {
  transition (to, from) {
    if (!from) { return 'slide-left' }
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}

Transitions applied on navigation:

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