refactor(schema)!: disable app.pageTransition and `app.layoutTransi…

…tion` by default (#8436)

docs/content/1.getting-started/5.transitions.md

@@ -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):
 
@@ -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):
 
@@ -255,6 +271,8 @@ definePageMeta({
 </script>
 ```
 
+<!-- Remove this example in next RC: ::StabilityEdge -->
+
 Or globally in the `nuxt.config`:
 
 ```ts [nuxt.config.ts]

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()
     }
   }

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.
      *

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],