Simple transition effect between pages and layouts in Nuxt.js

Samuel Snopko

Samuel Snopko

Apr 17, 2019
3 min read
Share on Twitter or LinkedIn

Vue.js makes the animations and transitions incredibly easy to implement. So you should really use this opportunity to give a little spark to your application/website to shine.

Nuxt.js already builds on the provided capabilities of Vue.js. It gives you a possibility to create a very simple transitions between the pages very fast and almost for no effort.

All you need to specify in your page.vue file is name of the transition. This name will be used to generate 6 transition classes, which can be use for transition effect between pages.

export default {
  transition: "default"
};

NuxtJS will interpret this as <transition name="default"> and it will look for following classes in you css code, which will define the transition between the pages.

.default-enter {
}
.default-enter-active {
}
.default-enter-to {
}
.default-leave {
}
.default-leave-active {
}
.default-leave-to {
}

You should definitely check Vue.js documentation to understand, when are these classes used and what are transition modes. But lets define very simple transition between pages using the opacity.

.page-enter-active,
.page-leave-active {
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 500ms;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

After integration of this code into your Nuxt.js application/website, the default transition between pages will take 1000ms and content of the page will fade out and then the new one will fade in. You even don't have to define transition name as the page is the default transition name. You can check this code in the CodeSandbox.

If you want create a special transition for one of your pages, then you can specify a name of the transition in page.vue file as I did in this CodeSandbox for intro.vue. As you can see, if you visit intro.vue page the transition is change to two black rectangles.

https://codesandbox.io/embed/2xovlqpv9n

Be aware, that all transitions between pages are working only if you are navigating between the pages with the same layout. If you are navigating between the pages with two different layouts you have to use the layout transition of Nuxt.js. You can see this in our CodeSandbox, if you visit other.vue page.

NuxtJS is already setting few defaults on the page transitions and the layout transitions. These defaults can be override directly in nuxt.config.js:

module.exports = {
  /* Layout Transitions */
  layoutTransition: {
    name: "layout",
    mode: ""
  },
  /* Page Transitions */
  pageTransition: {
    name: "default",
    mode: ""
  }
};

These are only the basics of transitioning between the pages in Nuxt.js. Under the hood of the Vue.js is hidden much more power, which can be used to create crazy animations and transitions. So keep digging in the documentation and check this sample from Sarah Drasner.

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Related Articles

Setting up a full static Nuxt site

Overwhelmed by too many options to create a blog? Chill and use Nuxt, Storyblok and TailwindCSS to make it simple, beautiful and incredibly performant

Alex Jover Morales

Alex Jover Morales

Jul 14, 2020

Create Dynamic Titles and Favicons with Nuxt

Thinking on showing a timer on the browser tab? Or different favicons depending on a state? Learn to use vue-meta in your Vue.js apps in this tutorial

Javier Martínez

Javier Martínez

Jun 18, 2020

Auto Load Vuejs Components in Nuxt

Tired of writing imports all over your code? Read this tutorial to learn how to use Nuxt components module to automatically import your components

Debbie O'Brien

Debbie O'Brien

Jun 17, 2020

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
StoryBlok
Learning Partner
Vue School