npm - @nuxt/docs-nightly - Versions diffs - 4.1.3-29313386.edc02e27 → 4.1.3-29316215.910d159d - Mend

@nuxt/docs-nightly 4.1.3-29313386.edc02e27 → 4.1.3-29316215.910d159d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/1.getting-started/01.introduction.md +4 -4
package/1.getting-started/02.installation.md +1 -1
package/1.getting-started/03.configuration.md +25 -25
package/1.getting-started/04.views.md +3 -3
package/1.getting-started/05.assets.md +9 -3
package/1.getting-started/06.styling.md +53 -43
package/1.getting-started/07.routing.md +9 -9
package/1.getting-started/08.seo-meta.md +50 -37
package/1.getting-started/09.transitions.md +38 -33
package/1.getting-started/10.data-fetching.md +61 -53
package/1.getting-started/11.state-management.md +19 -12
package/1.getting-started/12.error-handling.md +17 -15
package/1.getting-started/13.server.md +8 -8
package/1.getting-started/14.layers.md +19 -13
package/1.getting-started/15.prerendering.md +28 -28
package/1.getting-started/16.deployment.md +8 -8
package/1.getting-started/17.testing.md +42 -42
package/1.getting-started/18.upgrade.md +50 -68
package/2.guide/0.index.md +5 -5
package/2.guide/1.directory-structure/0.output.md +1 -1
package/2.guide/1.directory-structure/1.app/1.assets.md +1 -1
package/2.guide/1.directory-structure/1.app/1.components.md +40 -23
package/2.guide/1.directory-structure/1.app/1.composables.md +9 -9
package/2.guide/1.directory-structure/1.app/1.layouts.md +12 -8
package/2.guide/1.directory-structure/1.app/1.middleware.md +23 -17
package/2.guide/1.directory-structure/1.app/1.pages.md +25 -23
package/2.guide/1.directory-structure/1.app/1.plugins.md +17 -17
package/2.guide/1.directory-structure/1.app/1.utils.md +3 -3
package/2.guide/1.directory-structure/1.app/3.app-config.md +7 -7
package/2.guide/1.directory-structure/1.app/3.app.md +3 -3
package/2.guide/1.directory-structure/1.app/3.error.md +4 -4
package/2.guide/1.directory-structure/1.content.md +4 -1
package/2.guide/1.directory-structure/1.modules.md +5 -5
package/2.guide/1.directory-structure/1.public.md +1 -1
package/2.guide/1.directory-structure/1.server.md +30 -30
package/2.guide/1.directory-structure/1.shared.md +3 -3
package/2.guide/1.directory-structure/2.env.md +3 -3
package/2.guide/1.directory-structure/2.nuxtrc.md +1 -1
package/2.guide/1.directory-structure/3.nuxt-config.md +1 -1
package/2.guide/2.concepts/1.auto-imports.md +15 -15
package/2.guide/2.concepts/10.nuxt-lifecycle.md +7 -7
package/2.guide/2.concepts/2.vuejs-development.md +9 -9
package/2.guide/2.concepts/3.rendering.md +17 -15
package/2.guide/2.concepts/4.server-engine.md +1 -1
package/2.guide/2.concepts/5.modules.md +3 -3
package/2.guide/2.concepts/7.esm.md +16 -14
package/2.guide/2.concepts/8.typescript.md +4 -4
package/2.guide/3.going-further/1.events.md +3 -3
package/2.guide/3.going-further/1.experimental-features.md +238 -77
package/2.guide/3.going-further/1.features.md +44 -9
package/2.guide/3.going-further/1.internals.md +15 -15
package/2.guide/3.going-further/10.runtime-config.md +8 -8
package/2.guide/3.going-further/11.nightly-release-channel.md +1 -1
package/2.guide/3.going-further/2.hooks.md +11 -11
package/2.guide/3.going-further/3.modules.md +83 -81
package/2.guide/3.going-further/4.kit.md +5 -5
package/2.guide/3.going-further/6.nuxt-app.md +4 -4
package/2.guide/3.going-further/7.layers.md +51 -42
package/2.guide/3.going-further/9.debugging.md +2 -2
package/2.guide/4.recipes/1.custom-routing.md +19 -19
package/2.guide/4.recipes/2.vite-plugin.md +3 -3
package/2.guide/4.recipes/3.custom-usefetch.md +10 -10
package/2.guide/4.recipes/4.sessions-and-authentication.md +34 -20
package/2.guide/5.best-practices/performance.md +13 -13
package/3.api/1.components/1.client-only.md +6 -3
package/3.api/1.components/1.nuxt-client-fallback.md +10 -7
package/3.api/1.components/11.teleports.md +5 -2
package/3.api/1.components/12.nuxt-route-announcer.md +7 -7
package/3.api/1.components/13.nuxt-time.md +44 -17
package/3.api/1.components/2.nuxt-page.md +4 -4
package/3.api/1.components/3.nuxt-layout.md +13 -8
package/3.api/1.components/4.nuxt-link.md +40 -20
package/3.api/1.components/5.nuxt-loading-indicator.md +1 -1
package/3.api/1.components/6.nuxt-error-boundary.md +12 -10
package/3.api/2.composables/on-prehydrate.md +2 -2
package/3.api/2.composables/use-app-config.md +1 -1
package/3.api/2.composables/use-async-data.md +14 -14
package/3.api/2.composables/use-cookie.md +27 -19
package/3.api/2.composables/use-error.md +2 -2
package/3.api/2.composables/use-fetch.md +17 -17
package/3.api/2.composables/use-head-safe.md +5 -5
package/3.api/2.composables/use-head.md +3 -3
package/3.api/2.composables/use-hydration.md +5 -5
package/3.api/2.composables/use-lazy-async-data.md +2 -2
package/3.api/2.composables/use-lazy-fetch.md +2 -2
package/3.api/2.composables/use-loading-indicator.md +10 -10
package/3.api/2.composables/use-nuxt-app.md +10 -10
package/3.api/2.composables/use-nuxt-data.md +7 -7
package/3.api/2.composables/use-preview-mode.md +12 -15
package/3.api/2.composables/use-request-fetch.md +1 -1
package/3.api/2.composables/use-request-headers.md +3 -3
package/3.api/2.composables/use-response-header.md +7 -8
package/3.api/2.composables/use-route-announcer.md +3 -3
package/3.api/2.composables/use-router.md +6 -4
package/3.api/2.composables/use-runtime-config.md +11 -11
package/3.api/2.composables/use-runtime-hook.md +1 -1
package/3.api/2.composables/use-seo-meta.md +3 -3
package/3.api/2.composables/use-server-seo-meta.md +3 -3
package/3.api/2.composables/use-state.md +4 -4
package/3.api/3.utils/$fetch.md +6 -4
package/3.api/3.utils/abort-navigation.md +2 -2
package/3.api/3.utils/add-route-middleware.md +3 -3
package/3.api/3.utils/call-once.md +5 -5
package/3.api/3.utils/clear-error.md +2 -2
package/3.api/3.utils/clear-nuxt-data.md +2 -2
package/3.api/3.utils/clear-nuxt-state.md +2 -2
package/3.api/3.utils/create-error.md +2 -2
package/3.api/3.utils/define-lazy-hydration-component.md +13 -13
package/3.api/3.utils/define-nuxt-component.md +5 -5
package/3.api/3.utils/define-nuxt-plugin.md +12 -12
package/3.api/3.utils/define-nuxt-route-middleware.md +2 -2
package/3.api/3.utils/define-page-meta.md +16 -16
package/3.api/3.utils/define-route-rules.md +5 -5
package/3.api/3.utils/navigate-to.md +10 -10
package/3.api/3.utils/preload-components.md +1 -1
package/3.api/3.utils/preload-route-components.md +2 -2
package/3.api/3.utils/prerender-routes.md +2 -2
package/3.api/3.utils/refresh-cookie.md +4 -4
package/3.api/3.utils/refresh-nuxt-data.md +10 -5
package/3.api/3.utils/reload-nuxt-app.md +3 -3
package/3.api/3.utils/set-response-status.md +2 -2
package/3.api/3.utils/show-error.md +3 -3
package/3.api/3.utils/update-app-config.md +3 -2
package/3.api/4.commands/generate.md +1 -1
package/3.api/4.commands/prepare.md +4 -0
package/3.api/4.commands/typecheck.md +1 -1
package/3.api/5.kit/1.modules.md +36 -36
package/3.api/5.kit/10.templates.md +8 -6
package/3.api/5.kit/11.nitro.md +62 -62
package/3.api/5.kit/12.resolving.md +2 -2
package/3.api/5.kit/14.builder.md +1 -0
package/3.api/5.kit/15.examples.md +2 -2
package/3.api/5.kit/16.layers.md +26 -26
package/3.api/5.kit/3.compatibility.md +12 -12
package/3.api/5.kit/4.autoimports.md +12 -12
package/3.api/5.kit/5.components.md +5 -5
package/3.api/5.kit/6.context.md +3 -3
package/3.api/5.kit/7.pages.md +4 -4
package/3.api/5.kit/8.layout.md +1 -1
package/3.api/5.kit/9.plugins.md +5 -4
package/3.api/6.advanced/1.hooks.md +1 -1
package/3.api/6.advanced/2.import-meta.md +3 -3
package/3.api/6.nuxt-config.md +299 -864
package/3.api/index.md +7 -7
package/5.community/4.contribution.md +5 -5
package/5.community/5.framework-contribution.md +1 -1
package/6.bridge/1.overview.md +1 -1
package/6.bridge/10.configuration.md +2 -1
package/6.bridge/2.typescript.md +2 -2
package/6.bridge/3.bridge-composition-api.md +4 -4
package/6.bridge/4.plugins-and-middleware.md +5 -5
package/6.bridge/5.nuxt3-compatible-api.md +12 -9
package/6.bridge/6.meta.md +15 -14
package/6.bridge/8.nitro.md +2 -2
package/6.bridge/9.vite.md +3 -3
package/7.migration/10.bundling.md +1 -1
package/7.migration/11.server.md +3 -3
package/7.migration/2.configuration.md +18 -16
package/7.migration/20.module-authors.md +1 -1
package/7.migration/4.meta.md +18 -15
package/7.migration/5.plugins-and-middleware.md +8 -8
package/7.migration/6.pages-and-layouts.md +20 -16
package/7.migration/7.component-options.md +7 -7
package/7.migration/8.runtime-config.md +4 -4
package/package.json +1 -1

package/1.getting-started/08.seo-meta.md CHANGED Viewed

@@ -27,13 +27,13 @@ export default defineNuxtConfig({
       },
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      ]
-    }
-  }
+      ],
+    },
+  },
 })
 ```
-You can also provide any of the keys listed below in [Types](/docs/getting-started/seo-meta#types).
+You can also provide any of the keys listed below in [Types](/docs/4.x/getting-started/seo-meta#types).
 ### Defaults Tags
@@ -51,8 +51,8 @@ export default defineNuxtConfig({
       // update Nuxt defaults
       charset: 'utf-16',
       viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
-    }
-  }
+    },
+  },
 })
 ```
@@ -65,12 +65,12 @@ The [`useHead`](/docs/4.x/api/composables/use-head) composable function supports
 useHead({
   title: 'My App',
   meta: [
-    { name: 'description', content: 'My amazing site.' }
+    { name: 'description', content: 'My amazing site.' },
   ],
   bodyAttrs: {
-    class: 'test'
+    class: 'test',
   },
-  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
+  script: [{ innerHTML: 'console.log(\'Hello world\')' }],
 })
 </script>
 ```
@@ -96,7 +96,7 @@ useSeoMeta({
 </script>
 ```
-:read-more{to="/docs/api/composables/use-seo-meta"}
+:read-more{to="/docs/4.x/api/composables/use-seo-meta"}
 ## Components
@@ -118,9 +118,12 @@ const title = ref('Hello World')
   <div>
     <Head>
       <Title>{{ title }}</Title>
-      <Meta name="description" :content="title" />
+      <Meta
+        name="description"
+        :content="title"
+      />
       <Style>
-      body { background-color: green; }
+        body { background-color: green; }
       </Style>
     </Head>
@@ -145,9 +148,9 @@ interface MetaObject {
   meta?: Meta[]
   style?: Style[]
   script?: Script[]
-  noscript?: Noscript[];
-  htmlAttrs?: HtmlAttributes;
-  bodyAttrs?: BodyAttributes;
+  noscript?: Noscript[]
+  htmlAttrs?: HtmlAttributes
+  bodyAttrs?: BodyAttributes
 }
 ```
@@ -167,7 +170,7 @@ Reactivity is supported on all properties, by providing a computed value, a gett
   useHead({
     meta: [
-      { name: 'description', content: description }
+      { name: 'description', content: description },
     ],
   })
   </script>
@@ -178,7 +181,7 @@ Reactivity is supported on all properties, by providing a computed value, a gett
   const description = ref('My amazing site.')
   useSeoMeta({
-    description
+    description,
   })
   </script>
   ```
@@ -190,7 +193,10 @@ Reactivity is supported on all properties, by providing a computed value, a gett
   <template>
     <div>
-      <Meta name="description" :content="description" />
+      <Meta
+        name="description"
+        :content="description"
+      />
     </div>
   </template>
   ```
@@ -211,8 +217,8 @@ If you want to use a function (for full control), then this cannot be set in you
   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
-    }
+      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
+    },
   })
   </script>
   ```
@@ -231,12 +237,12 @@ You can use `templateParams` to provide additional placeholders in your `titleTe
   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
+      return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName'
     },
     templateParams: {
       siteName: 'Site Title',
-      separator: '-'
-    }
+      separator: '-',
+    },
   })
   </script>
   ```
@@ -256,9 +262,9 @@ useHead({
     {
       src: 'https://third-party-script.com',
       // valid options are: 'head' | 'bodyClose' | 'bodyOpen'
-      tagPosition: 'bodyClose'
-    }
-  ]
+      tagPosition: 'bodyClose',
+    },
+  ],
 })
 </script>
 ```
@@ -274,7 +280,7 @@ For example, you can first set the current page title (this is extracted at buil
 ```vue twoslash [pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  title: 'Some Page'
+  title: 'Some Page',
 })
 </script>
 ```
@@ -286,14 +292,14 @@ And then in your layout file, you might use the route's metadata you have previo
 const route = useRoute()
 useHead({
-  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
+  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }],
 })
 </script>
 ```
-:link-example{to="/docs/examples/features/meta-tags"}
+:link-example{to="/docs/4.x/examples/features/meta-tags"}
-:read-more{to="/docs/guide/directory-structure/app/pages/#page-metadata"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/pages/#page-metadata"}
 ### Dynamic Title
@@ -317,7 +323,7 @@ useHead({
     return productCategory
       ? `${productCategory} - Site Title`
       : 'Site Title'
-  }
+  },
 })
 </script>
 ```
@@ -336,14 +342,14 @@ The example below shows how you might enable Google Fonts using either the `link
     link: [
       {
         rel: 'preconnect',
-        href: 'https://fonts.googleapis.com'
+        href: 'https://fonts.googleapis.com',
       },
       {
         rel: 'stylesheet',
         href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
-        crossorigin: ''
-      }
-    ]
+        crossorigin: '',
+      },
+    ],
   })
   </script>
   ```
@@ -351,8 +357,15 @@ The example below shows how you might enable Google Fonts using either the `link
   ```vue [app/Components]
   <template>
     <div>
-      <Link rel="preconnect" href="https://fonts.googleapis.com" />
-      <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
+      <Link
+        rel="preconnect"
+        href="https://fonts.googleapis.com"
+      />
+      <Link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+        crossorigin=""
+      />
     </div>
   </template>
   ```

package/1.getting-started/09.transitions.md CHANGED Viewed

@@ -15,8 +15,8 @@ You can enable page transitions to apply an automatic transition for all your [p
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
-    pageTransition: { name: 'page', mode: 'out-in' }
-  }
+    pageTransition: { name: 'page', mode: 'out-in' },
+  },
 })
 ```
@@ -80,8 +80,8 @@ To set a different transition for a page, set the `pageTransition` key in [`defi
 <script setup lang="ts">
 definePageMeta({
   pageTransition: {
-    name: 'rotate'
-  }
+    name: 'rotate',
+  },
 })
 </script>
 ```
@@ -120,8 +120,8 @@ You can enable layout transitions to apply an automatic transition for all your
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
-    layoutTransition: { name: 'layout', mode: 'out-in' }
-  }
+    layoutTransition: { name: 'layout', mode: 'out-in' },
+  },
 })
 ```
@@ -192,7 +192,7 @@ div {
 ```vue [app/pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'orange'
+  layout: 'orange',
 })
 </script>
@@ -219,8 +219,8 @@ Similar to `pageTransition`, you can apply a custom `layoutTransition` to the pa
 definePageMeta({
   layout: 'orange',
   layoutTransition: {
-    name: 'slide-in'
-  }
+    name: 'slide-in',
+  },
 })
 </script>
 ```
@@ -236,13 +236,13 @@ export default defineNuxtConfig({
   app: {
     pageTransition: {
       name: 'fade',
-      mode: 'out-in' // default
+      mode: 'out-in', // default
     },
     layoutTransition: {
       name: 'slide',
-      mode: 'out-in' // default
-    }
-  }
+      mode: 'out-in', // default
+    },
+  },
 })
 ```
@@ -257,8 +257,8 @@ To override the global transition property, use the `definePageMeta` to define p
 definePageMeta({
   pageTransition: {
     name: 'bounce',
-    mode: 'out-in' // default
-  }
+    mode: 'out-in', // default
+  },
 })
 </script>
 ```
@@ -271,7 +271,7 @@ definePageMeta({
 <script setup lang="ts">
 definePageMeta({
   pageTransition: false,
-  layoutTransition: false
+  layoutTransition: false,
 })
 </script>
 ```
@@ -282,8 +282,8 @@ Or globally in the `nuxt.config`:
 export default defineNuxtConfig({
   app: {
     pageTransition: false,
-    layoutTransition: false
-  }
+    layoutTransition: false,
+  },
 })
 ```
@@ -303,8 +303,8 @@ definePageMeta({
       console.log('Before enter...')
     },
     onEnter: (el, done) => {},
-    onAfterEnter: (el) => {}
-  }
+    onAfterEnter: (el) => {},
+  },
 })
 </script>
 ```
@@ -324,12 +324,13 @@ To apply dynamic transitions using conditional logic, you can leverage inline [m
 definePageMeta({
   pageTransition: {
     name: 'slide-right',
-    mode: 'out-in'
+    mode: 'out-in',
   },
   middleware (to, from) {
-    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
+    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean') {
       to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
-  }
+    }
+  },
 })
 </script>
@@ -398,10 +399,12 @@ When `<NuxtPage />` is used in `app.vue`, transitions can be configured with the
 <template>
   <div>
     <NuxtLayout>
-      <NuxtPage :transition="{
-        name: 'bounce',
-        mode: 'out-in'
-      }" />
+      <NuxtPage
+        :transition="{
+          name: 'bounce',
+          mode: 'out-in',
+        }"
+      />
     </NuxtLayout>
   </div>
 </template>
@@ -422,8 +425,8 @@ The Nuxt integration can be enabled with the `experimental.viewTransition` optio
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    viewTransition: true
-  }
+    viewTransition: true,
+  },
 })
 ```
@@ -437,7 +440,7 @@ By default, view transitions are enabled for all [pages](/docs/4.x/guide/directo
 export default defineNuxtConfig({
   app: {
     // Disable view transitions globally, and opt-in on a per page basis
-    viewTransition: false
+    viewTransition: false,
   },
 })
 ```
@@ -447,7 +450,7 @@ It is possible to override the default `viewTransition` value for a page by sett
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  viewTransition: false
+  viewTransition: false,
 })
 </script>
 ```
@@ -459,8 +462,10 @@ Overriding view transitions on a per-page basis will only have an effect if you
 If you are also using Vue transitions like `pageTransition` and `layoutTransition` (see above) to achieve the same result as the new View Transitions API, then you may wish to _disable_ Vue transitions if the user's browser supports the newer, native web API. You can do this by creating `~/middleware/disable-vue-transitions.global.ts` with the following contents:
 ```ts
-export default defineNuxtRouteMiddleware(to => {
-  if (import.meta.server || !document.startViewTransition) { return }
+export default defineNuxtRouteMiddleware((to) => {
+  if (import.meta.server || !document.startViewTransition) {
+    return
+  }
   // Disable built-in Vue transitions
   to.meta.pageTransition = false