Page and Layout Transitions in Nuxt.js

With Nuxt.js it is really easy to add transitions between your pages. You can create transitions for all your pages or layouts and you can even have different transitions for specific pages.

The default Nuxt.js transition name for pages is page. That means in order to add a fade transition to every page we just need to add the the word page before our enter and leave transition classes that Vue.js gives us.

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

You can add this css to a global css file and then import it using the nuxt.config.js file.

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

Layouts work pretty much the same except that instead of writing a class starting with the word page you use the word layout.

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

You can of course create a transition for a specific page such as the home page for example. In your index.vue file you can add a property of transition and give it the name you like.

export default {
  transition: 'home'
}

This name will then be what you use instead of the word page when defining your transition classes.

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

Nuxt.js wraps your page in a transition component and adds the name to it. In this case the name it adds is home. Basically Nuxt.js does this for you so you don't need to.

<transition name="home">

There is a slight difference in the default mode in Nuxt.js compared to Vue.js. The default mode in Nuxt.js is out-in. Should you wish to change this you can do so using the mode key.

However if you want to change the mode across all pages or layouts then you can do so in the nuxt.config.js file using the pageTransition key for pages and the layoutTransition key for layouts.

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

As you can see adding page transitions in Nuxt.js is really easy so why not give it a try!

Comments

[KP]

@debs_obrien perhaps you have thoughts on how to do this in nuxt? An article would be even better..

dev.to/caroso1222/how-to-create-fa...

[Debbie O'Brien]

haha, looks cool. I will study it and see what I can do. Thanks for sharing the link

[KP]

thanks @debs_obrien patiently waiting on this!

[👨🏾‍💻 Kam Banwait]

Is it possible to somehow exclude a header and footer from fading in/out from the layout at all?

I've got a site with different layouts and I find the transition from different layouts is different from switching between pages with the same layout to when you switch from diff layouts - the header is faded in/out on the layout switch.

So as a user, this may seem a little bit of an odd experience when transitioning between pages as certain elements inconsistently

[Debbie O'Brien]

emm not too sure. layouts can be pretty tricky when it comes to transitions sometimes

[Joaquim Ley]

Quick question: Using tailwindcss seems to break its functionality, even with the purgecss comments. Can you provide a how-to or maybe an example?

Thank you very much for the quick article, and time!

[Debbie O'Brien]

not sure how tailwind would interfere here. you are just adding a class that make the transition work so you just add that class to the main.css file. tailwind shouldn't cause any issues. we use tailwind on all our applications and never had a problem.

[Joaquim Ley]

It was due to the purgecss. After fixing what should or not it started working again ;)