description: Nuxt leverages Vue's Transition component to apply transitions between pages and layouts.
---
# Transitions
Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component) component to apply transitions between pages and layouts.
## Page transitions
Nuxt sets `{ name: 'page', mode: 'out-in' }` transition by default for all your [pages](/guide/directory-structure/pages).
To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):
::code-group
```html [app.vue]
<template>
<NuxtPage/>
</template>
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
```
```html [pages/index.vue]
<template>
<div>
<h1>Home page</h1>
<NuxtLinkto="/about">About page</NuxtLink>
</div>
</template>
```
```html [pages/about.vue]
<template>
<div>
<h1>About page</h1>
<NuxtLinkto="/">Home page</NuxtLink>
</div>
</template>
```
::
This produces the following result when navigating between pages:
Similar to `pageTransition`, you can apply a custom `layoutTransition` to the page component using `definePageMeta`:
```vue [pages/about.vue]
<scriptsetuplang="ts">
definePageMeta({
layout: 'orange',
layoutTransition: {
name: 'slide-in'
}
})
</script>
```
## Global settings
You can customize these default transition names globally using `nuxt.config`.
Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://vuejs.org/api/built-in-components.html#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
pageTransition: {
name: 'fade',
mode: 'out-in' // default
},
layoutTransition: {
name: 'slide',
mode: 'out-in' // default
}
})
```
::alert{type="info"}
If you change the `name` property, you also have to rename the CSS classes accordingly.
::
To override the global transition property, use the `definePageMeta` to define page or layout transitions for a single Nuxt page and override any page or layout transitions that are defined globally in `nuxt.config` file.
```vue [pages/some-page.vue]
<scriptsetuplang="ts">
definePageMeta({
pageTransition: {
name: 'bounce',
mode: 'out-in' // default
}
})
</script>
```
## Disable Transitions
`pageTransition` and `layoutTransition` can be disabled for a specific route:
```vue [pages/some-page.vue]
<scriptsetuplang="ts">
definePageMeta({
pageTransition: false
layoutTransition: false
})
</script>
```
Or globally in the `nuxt.config`:
```ts [nuxt.config.ts]
defineNuxtConfig({
pageTransition: false,
layoutTransition: false
})
```
## JavaScript Hooks
For advanced use-cases, you can use JavaScript hooks to create highly dynamic and custom transitions for your Nuxt pages.
This way presents perfect use-cases for JavaScript animation libraries such as [GSAP](https://greensock.com/gsap/) or [Tween.js](https://createjs.com/tweenjs).
```vue [pages/some-page.vue]
<scriptsetuplang="ts">
definePageMeta({
pageTransition: {
name: 'custom-flip',
mode: 'out-in',
onBeforeEnter: (el) => {
console.log('Before enter...')
},
onEnter: (el, done) => {},
onAfterEnter: (el) => {}
}
})
</script>
```
::alert{type="info"}
Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) available in the `Transition` component.
::
## Dynamic Transitions
To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/guide/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`.
