Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

refactor(schema)!: disable app.pageTransition and app.layoutTransition by default #8436

Merged
merged 5 commits into from Oct 24, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 21 additions & 3 deletions docs/content/1.getting-started/5.transitions.md
Expand Up @@ -9,7 +9,15 @@ Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transiti

## Page transitions

Nuxt sets `{ name: 'page', mode: 'out-in' }` transition by default for all your [pages](/guide/directory-structure/pages).
You can enable page transitions to apply an automatic transition for all your [pages](/guide/directory-structure/pages).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
app: {
pageTransition: { name: 'page', mode: 'out-in' }
},
})
```

To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):

Expand Down Expand Up @@ -100,9 +108,17 @@ Moving to the about page will add the 3d rotation effect:
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.mp4" type="video/mp4">
</video>

## Layouts transitions
## Layout transitions

Nuxt sets `{ name: 'layout', mode: 'out-in' }` transition by default for all your [layouts](/guide/directory-structure/layouts).
You can enable layout transitions to apply an automatic transition for all your [layouts](/guide/directory-structure/layouts).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' }
},
})
```

To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):

Expand Down Expand Up @@ -255,6 +271,8 @@ definePageMeta({
</script>
```

<!-- Remove this example in next RC: ::StabilityEdge -->

Or globally in the `nuxt.config`:

```ts [nuxt.config.ts]
Expand Down
4 changes: 2 additions & 2 deletions packages/schema/src/config/_app.ts
Expand Up @@ -149,7 +149,7 @@ export default defineUntypedSchema({
* @see https://vuejs.org/api/built-in-components.html#transition
* @type {typeof import('../src/types/config').NuxtAppConfig['layoutTransition']}
*/
layoutTransition: { name: 'layout', mode: 'out-in' },
layoutTransition: false,
/**
* Default values for page transitions.
*
Expand All @@ -159,7 +159,7 @@ export default defineUntypedSchema({
* @see https://vuejs.org/api/built-in-components.html#transition
* @type {typeof import('../src/types/config').NuxtAppConfig['pageTransition']}
*/
pageTransition: { name: 'page', mode: 'out-in' },
pageTransition: false,
/**
* Default values for KeepAlive configuration between pages.
*
Expand Down