So far, you have managed to create multiple routes and pages for a Nuxt app and add a loading bar that shows up when switching between pages. This makes a pretty decent-looking app already. But that is not all that you can do with Nuxt. You can add more stunning effects and transitions between pages. This is where the transition properties in pages (for example, /pages/about.vue) come in, as well as the pageTransition and layoutTransition options in the Nuxt config file.
We can apply a transition globally through the Nuxt config file or specifically on certain pages. We will guide you through this topic. However, to understand how the transition works in Nuxt, we should first understand how it works in Vue, and then we can learn how to implement it on our pages when the route is changed. Let's get started.
Understanding Vue transitions
Vue relies on CSS transitions and uses the <transition> Vue component to wrap around an HTML element or a Vue component...
