Nuxt.js uses the transition component to let you create amazing transitions/animations between your routes.

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

export default {
  // Can be a String
  transition: ''
  // Or an Object
  transition: {}
  // or a Function
  transition (to, from) {}
}

String

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

export default {
  transition: 'home'
}

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

<transition name="home"></transition>

Now all you have to do is create the new class for your transitions.

<styles>
  .home-enter-active, .home-leave-active { transition: opacity .5s; }
  .home-enter, .home-leave-active { opacity: 0; }
</styles>

Object

If the transition key is set as an object:

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

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

<transition name="home" mode="out-in"></transition>

The transition object can have many properties such as name, mode, css, duration and many more. Please see the vue docs for more info.

You can also define methods in the page transition property, for more information on the JavaScript hooks see the vue docs.

export default {
  transition: {
    afterLeave(el) {
      console.log('afterLeave', el)
    }
  }
}

Transition Mode

export default {
  transition: {
    name: 'home',
    mode: ''
  }
}

Function

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 => slide-right.

Global Settings

The Nuxt.js default transition name is "page". To add a fade transition to every page of your application, all you need is a CSS file that is shared across all your routes.

Our global css in assets/main.css:

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

Then we add its path to the css array in our nuxt.config.js file:

export default {
  css: ['~/assets/main.css']
}

Configuration Settings

The layoutTransition Property

The layout transition is used to set the default properties of the layout transitions.

The default settings for layout transitions are:

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

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

If you want to change the default settings for your layout transitions you can do so in the nuxt.config.js file.

export default {
  layoutTransition: 'my-layouts'
  // or
  layoutTransition: {
    name: 'my-layouts',
    mode: 'out-in'
  }
}

.my-layouts-enter-active,
.my-layouts-leave-active {
  transition: opacity 0.5s;
}
.my-layouts-enter,
.my-layouts-leave-active {
  opacity: 0;
}

The pageTransition Property

The default settings for page transitions are:

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

Should you wish to modify the default settings you can do so in the nuxt.config.js

export default {
  pageTransition: 'my-page'
  // or
  pageTransition: {
    name: 'my-page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}

If you do modify the page Transition name you will also have to rename the css class.

.my-page-enter-active,
.my-page-leave-active {
  transition: opacity 0.5s;
}
.my-page-enter,
.my-page-leave-to {
  opacity: 0;
}