Nuxt 3 is out! Discover more about it on https://nuxt.com/v3

Transitions

Nuxt 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.

pages/index.vue
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.

pages/index.vue
export default {
  transition: 'home'
}

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

pages/index.vue
<transition name="home"></transition>
This is automatically done for you and you do not need to add the <transition> component to your pages or layouts.

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

pages/index.vue
<style>
  .home-enter-active, .home-leave-active { transition: opacity .5s; }
  .home-enter, .home-leave-active { opacity: 0; }
</style>

Object

If the transition key is set as an object:

pages/index.vue
export default {
  transition: {
    name: 'home',
    mode: 'out-in'
  }
}

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

pages/index.vue
<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

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: ''.
pages/index.vue
export default {
  transition: {
    name: 'home',
    mode: ''
  }
}

Function

If the transition key is set as a function:

pages/index.vue
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 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:

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:

nuxt.config.js
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'
}
assets/main.css
.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.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.

nuxt.config.js
export default {
  layoutTransition: 'my-layouts'
  // or
  layoutTransition: {
    name: 'my-layouts',
    mode: 'out-in'
  }
}
assets/main.css
.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

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.

assets/main.css
.my-page-enter-active,
.my-page-leave-active {
  transition: opacity 0.5s;
}
.my-page-enter,
.my-page-leave-to {
  opacity: 0;
}
Edit this page on GitHub Updated at Tue, Dec 6, 2022
Clément Ollivier Clément Ollivier Daniel Roe Daniel Roe Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Sébastien Chopin Sébastien Chopin Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss Xanzhu Xanzhu bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Lucas Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Ashimine Ikko Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti Marcello Bachechi Marcello Bachechi Rodolphe Rodolphe Thomas Underwood Thomas Underwood Shek Evgeniy Shek Evgeniy Lukasz Formela Lukasz Formela Hugo Torzuoli Hugo Torzuoli