Simple transition effect between pages and layouts in Nuxt.js


Today’s guest is Samuel Snopko! He’s a FrontEnd Knight & DesignOps enthusiast with a passion beautiful web. Co-creator of DX Meetup Basel and co-organizer of Frontend Meetup Freiburg. Recently fell in love with VueJS, NuxtJS, and Storyblok.

Sounds great huh? Let’s see what Samuel has for us!

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-leave-active {
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 500ms;
.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.

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.

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

Do you want to sponsor a VueDose tip? Send an email to and have more info!

Start saving time and get a tip about the Vue ecosystem every week, right in your inbox.