From 80c6f8c254d7f0f5190251fe415744723849cd34 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 24 Oct 2022 09:48:31 +0100 Subject: [PATCH 1/4] fix(schema)!: disable page/layout transitions by default --- packages/schema/src/config/_app.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/schema/src/config/_app.ts b/packages/schema/src/config/_app.ts index 176afd8ed12..7f896b23fa3 100644 --- a/packages/schema/src/config/_app.ts +++ b/packages/schema/src/config/_app.ts @@ -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. * @@ -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. * From 82041ce9eb7f424f7e31e8c2567643aa0cf8856f Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 24 Oct 2022 09:58:49 +0100 Subject: [PATCH 2/4] docs: update transition documentation --- .../1.getting-started/5.transitions.md | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md index 7f3ad702ff5..b57c59010a3 100644 --- a/docs/content/1.getting-started/5.transitions.md +++ b/docs/content/1.getting-started/5.transitions.md @@ -9,7 +9,15 @@ Nuxt leverages Vue's [``](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): @@ -100,9 +108,17 @@ Moving to the about page will add the 3d rotation effect: -## 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): @@ -255,6 +271,8 @@ definePageMeta({ ``` + + Or globally in the `nuxt.config`: ```ts [nuxt.config.ts] From e730efa8976acab405f026f0866178a67a9e3041 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 24 Oct 2022 10:31:26 +0100 Subject: [PATCH 3/4] fix(nuxt): don't pass `hasTransition` prop when built --- packages/nuxt/src/app/components/layout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nuxt/src/app/components/layout.ts b/packages/nuxt/src/app/components/layout.ts index 70b96a3c565..4f3e3e11bb7 100644 --- a/packages/nuxt/src/app/components/layout.ts +++ b/packages/nuxt/src/app/components/layout.ts @@ -74,7 +74,7 @@ export default defineComponent({ // We avoid rendering layout transition if there is no layout to render 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() } } From ad4b440be6399b8d3e6d0d9b5846e71b0547c9dd Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Mon, 24 Oct 2022 11:04:23 +0100 Subject: [PATCH 4/4] test: re-enable page transitions for test suite --- test/fixtures/basic/nuxt.config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts index eb5cd49f321..e7c96f47350 100644 --- a/test/fixtures/basic/nuxt.config.ts +++ b/test/fixtures/basic/nuxt.config.ts @@ -5,6 +5,8 @@ import { withoutLeadingSlash } from 'ufo' export default defineNuxtConfig({ app: { + pageTransition: true, + layoutTransition: true, head: { charset: 'utf-8', link: [undefined],