Routes transitions

Routes transitions example with Nuxt.js

Исходный код


Nuxt.js uses the <transition> component to allow you to create amazing transitions between your routes.


The default transition name Nuxt.js uses is page.

To add a fade transition to every page of your application, we need a CSS file that is shared across all our routes, so we start by creating a file in the assets/ folder.


.page-enter-active, .page-leave-active {
  transition: opacity .5s
.page-enter, .page-leave-active {
  opacity: 0

We add it in our nuxt.config.js file:

module.exports = {
  css: [

And voilà! A nice fade animation will be shown between every routes.

The transition key

You can update the defaults transition settings by adding the transition key in you nuxt.config.js file.

module.exports = {
  transition: 'test'
  // or
  transition: {
    name: 'test',
    mode: 'out-in'

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

<transition name="test" mode="out-in">

To learn more about the Vue.js <transition> component:

The following properties that the transition key can have:

key Default definition
name page The transition name applied on all the routes transitions.
mode out-in The transition mode applied on all routes, see Vue.js documentation.

Note: if the transition key is set as a string, it will be used as the

Custom transition on a specific route

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


  <div class="container">
    <h1>About page</h1>
    <router-link to="/">Home page</router-link>

export default {
  transition: 'bounce'

And then we add the CSS animation for this custom transition:

/* assets/main.css */
.bounce-enter-active {
  animation: bounce-in .8s;
.bounce-leave-active {
  animation: bounce-out .5s;
@keyframes bounce-in {
  0% { transform: scale(0) }
  50% { transform: scale(1.5) }
  100% { transform: scale(1) }
@keyframes bounce-out {
  0% { transform: scale(1) }
  50% { transform: scale(1.5) }
  100% { transform: scale(0) }

Note: you can also the set transition key as an object in page components