Search⌘ K
AI Features
Home
Courses
A Beginner’s Guide To Nuxt 3

Transitions

Explore how to add smooth and visually appealing transitions between pages and layouts in Nuxt 3. Learn to configure global and local transitions with CSS and Vue's Transition component, apply transition modes, and customize effects to improve user experience and interface quality.

We'll cover the following...

Transitions can make our app more appealing when switching between pages. They can add CSS effects, such as making the transition smoother or animated.

Global transitions

Nuxt uses the Vue.js <Transition> component, and we can activate transitions for our pages in the nuxt.config.ts:

Javascript (babel-node)
export default defineNuxtConfig({
	app: {
		pageTransition: { name: "page", mode: "out-in" },
	},
});

  • Line 3: This creates a transition with a name and a mode property.

Transition mode

The mode setting above states how the transition will be applied from one page to another. The value of out-in means the new element is only inserted after the element leaving has completed its leaving animation, with the ...