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

This commit is contained in:
Daniel Roe 2022-10-24 17:23:49 +02:00 committed by GitHub
parent 5a88510cb7
commit 59d8c51b5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 6 deletions

View File

@ -9,7 +9,15 @@ Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transiti
## Page transitions ## 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): To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):
@ -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"> <source src="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.mp4" type="video/mp4">
</video> </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): To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):
@ -255,6 +271,8 @@ definePageMeta({
</script> </script>
``` ```
<!-- Remove this example in next RC: ::StabilityEdge -->
Or globally in the `nuxt.config`: Or globally in the `nuxt.config`:
```ts [nuxt.config.ts] ```ts [nuxt.config.ts]

View File

@ -74,7 +74,7 @@ export default defineComponent({
// We avoid rendering layout transition if there is no layout to render // We avoid rendering layout transition if there is no layout to render
return _wrapIf(Transition, hasLayout && transitionProps, { return _wrapIf(Transition, hasLayout && transitionProps, {
default: () => _wrapIf(LayoutLoader, hasLayout && { key: layout.value, name: layout.value, hasTransition: !!transitionProps }, context.slots).default() default: () => _wrapIf(LayoutLoader, hasLayout && { key: layout.value, name: layout.value, hasTransition: process.dev ? !!transitionProps : undefined }, context.slots).default()
}).default() }).default()
} }
} }

View File

@ -149,7 +149,7 @@ export default defineUntypedSchema({
* @see https://vuejs.org/api/built-in-components.html#transition * @see https://vuejs.org/api/built-in-components.html#transition
* @type {typeof import('../src/types/config').NuxtAppConfig['layoutTransition']} * @type {typeof import('../src/types/config').NuxtAppConfig['layoutTransition']}
*/ */
layoutTransition: { name: 'layout', mode: 'out-in' }, layoutTransition: false,
/** /**
* Default values for page transitions. * Default values for page transitions.
* *
@ -159,7 +159,7 @@ export default defineUntypedSchema({
* @see https://vuejs.org/api/built-in-components.html#transition * @see https://vuejs.org/api/built-in-components.html#transition
* @type {typeof import('../src/types/config').NuxtAppConfig['pageTransition']} * @type {typeof import('../src/types/config').NuxtAppConfig['pageTransition']}
*/ */
pageTransition: { name: 'page', mode: 'out-in' }, pageTransition: false,
/** /**
* Default values for KeepAlive configuration between pages. * Default values for KeepAlive configuration between pages.
* *

View File

@ -5,6 +5,8 @@ import { withoutLeadingSlash } from 'ufo'
export default defineNuxtConfig({ export default defineNuxtConfig({
app: { app: {
pageTransition: true,
layoutTransition: true,
head: { head: {
charset: 'utf-8', charset: 'utf-8',
link: [undefined], link: [undefined],