A Beginner’s Guide To Nuxt 3/

...

/

Transitions

Transitions

Learn to add transitions to your Nuxt project to make it stand out when switching between pages.

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:

Press + to interact
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 ...