Vue.js 2 Design Patterns and Best Practices

Transitions

When navigating between pages, Nuxt makes adding transitions super simple. Let's add a transition to each navigation action by adding custom CSS. Add a file named transition.css into the assets folder, and we'll hook into the various different page states:

.page-enter-active, .page-leave-active {  transition: all 0.25s;}.page-enter, .page-leave-active {  opacity: 0;  transform: scale(2);}

After adding the file, we'll need to tell Nuxt that we want to use it as a .css file. Add the following code to your nuxt.config.js:

 css: ['~/assets/transition.css']

Now, we can navigate between any page and we'll have a page transition each time.