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

package/3.api/index.md

@@ -7,25 +7,25 @@ surround: false
 ---
 
 ::card-group
-  ::card{icon="i-lucide-box" title="Components" to="/docs/api/components/client-only"}
+  ::card{icon="i-lucide-box" title="Components" to="/docs/4.x/api/components/client-only"}
   Explore Nuxt built-in components for pages, layouts, head, and more.
   ::
-  ::card{icon="i-lucide-arrow-left-right" title="Composables" to="/docs/api/composables/use-app-config"}
+  ::card{icon="i-lucide-arrow-left-right" title="Composables" to="/docs/4.x/api/composables/use-app-config"}
   Discover Nuxt composable functions for data-fetching, head management and more.
   ::
-  ::card{icon="i-lucide-square-function" title="Utils" to="/docs/api/utils/dollarfetch"}
+  ::card{icon="i-lucide-square-function" title="Utils" to="/docs/4.x/api/utils/dollarfetch"}
   Learn about Nuxt utility functions for navigation, error handling and more.
   ::
-  ::card{icon="i-lucide-square-terminal" title="Commands" to="/docs/api/commands/add"}
+  ::card{icon="i-lucide-square-terminal" title="Commands" to="/docs/4.x/api/commands/add"}
   List of Nuxt CLI commands to init, analyze, build, and preview your application.
   ::
-  ::card{icon="i-lucide-package" title="Nuxt Kit" to="/docs/api/kit/modules"}
+  ::card{icon="i-lucide-package" title="Nuxt Kit" to="/docs/4.x/api/kit/modules"}
   Understand Nuxt Kit utilities to create modules and control Nuxt.
   ::
-  ::card{icon="i-lucide-brain" title="Advanced" to="/docs/api/advanced/hooks"}
+  ::card{icon="i-lucide-brain" title="Advanced" to="/docs/4.x/api/advanced/hooks"}
   Go deep in Nuxt internals with Nuxt lifecycle hooks.
   ::
-  ::card{icon="i-lucide-cog" title="Nuxt Configuration" to="/docs/api/nuxt-config"}
+  ::card{icon="i-lucide-cog" title="Nuxt Configuration" to="/docs/4.x/api/nuxt-config"}
   Explore all Nuxt configuration options to customize your application.
   ::
 ::

package/5.community/4.contribution.md

@@ -42,7 +42,7 @@ If you're working on a feature, then we ask that you **open a feature request is
 
 For typo fixes, it's recommended to batch multiple typo fixes into one pull request to maintain a cleaner commit history.
 
-For bigger changes to Nuxt itself, we recommend that you first [create a Nuxt module](/docs/community/contribution#create-a-module) and implement the feature there. This allows for quick proof-of-concept. You can then [create an RFC](/docs/community/contribution#make-an-rfc) in the form of a discussion. As users adopt it and you gather feedback, it can then be refined and either added to Nuxt core or continue as a standalone module.
+For bigger changes to Nuxt itself, we recommend that you first [create a Nuxt module](/docs/4.x/community/contribution#create-a-module) and implement the feature there. This allows for quick proof-of-concept. You can then [create an RFC](/docs/4.x/community/contribution#make-an-rfc) in the form of a discussion. As users adopt it and you gather feedback, it can then be refined and either added to Nuxt core or continue as a standalone module.
 
 #### Commit Conventions
 
@@ -58,7 +58,7 @@ If you are working in a project with a monorepo, like `nuxt/nuxt`, ensure that y
 
 If you don't know how to send a pull request, we recommend reading [the guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
 
-When sending a pull request, make sure your PR's title also follows the [Commit Convention](/docs/community/contribution#commit-conventions).
+When sending a pull request, make sure your PR's title also follows the [Commit Convention](/docs/4.x/community/contribution#commit-conventions).
 
 If your PR fixes or resolves existing issues, please make sure you mention them in the PR description.
 
@@ -106,7 +106,7 @@ If you need help while building it, feel free to [check in with us](/docs/4.x/co
 
 ### Make an RFC
 
-We highly recommend [creating a module](/docs/community/contribution#create-a-module) first to test out big new features and gain community adoption.
+We highly recommend [creating a module](/docs/4.x/community/contribution#create-a-module) first to test out big new features and gain community adoption.
 
 If you have done this already, or it's not appropriate to create a new module, then please start by creating a new discussion. Make sure it explains your thinking as clearly as possible. Include code examples or function signatures for new APIs. Reference existing issues or pain points with examples.
 
@@ -172,7 +172,7 @@ We recommend using [VS Code](https://code.visualstudio.com) along with the [ESLi
 
 #### No Prettier
 
-Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, or `bun run lint --fix` or referring the [ESLint section](/docs/community/contribution#use-eslint) for IDE Setup.
+Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, or `bun run lint --fix` or referring the [ESLint section](/docs/4.x/community/contribution#use-eslint) for IDE Setup.
 
 If you have Prettier installed in your editor, we recommend you disable it when working on the project to avoid conflict.
 
@@ -218,6 +218,6 @@ Here are some tips that may help improve your documentation:
   Nuxt will throw an error.
   ::
 
-::read-more{to="/docs/community/framework-contribution#documentation-guide"}
+::read-more{to="/docs/4.x/community/framework-contribution#documentation-guide"}
 Learn how to contribute to the documentation.
 ::

package/5.community/5.framework-contribution.md

@@ -42,7 +42,7 @@ To contribute to Nuxt, you need to set up a local environment.
     git checkout -b my-new-branch
     ```
 
-Then, test your changes against the [playground](/docs/community/framework-contribution#playground) and [test](/docs/community/framework-contribution#testing) your changes before submitting a pull request.
+Then, test your changes against the [playground](/docs/4.x/community/framework-contribution#playground) and [test](/docs/4.x/community/framework-contribution#testing) your changes before submitting a pull request.
 
 ### Playground
 

package/6.bridge/1.overview.md

@@ -86,7 +86,7 @@ You can use static `import`, dynamic `import()` and `export default` instead. Us
 import { defineNuxtConfig } from '@nuxt/bridge'
 
 export default defineNuxtConfig({
-  bridge: false
+  bridge: false,
 })
 ```
 

package/6.bridge/10.configuration.md

@@ -11,6 +11,7 @@ You can check [bridge/src/module.ts](https://github.com/nuxt/bridge/blob/main/pa
 
 ```ts [nuxt.config.ts]
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
 
@@ -63,7 +64,7 @@ export default defineNuxtConfig({
 
   vite: {
     // Config for Vite
-  }
+  },
 })
 ```
 

package/6.bridge/2.typescript.md

@@ -16,8 +16,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     typescript: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 

package/6.bridge/3.bridge-composition-api.md

@@ -47,8 +47,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     capi: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 
@@ -91,7 +91,7 @@ export default <Middleware> function (ctx) { }
 
 This was a type-helper stub function that is now removed.
 
-You may also keep using Nuxt 2-style plugins, by removing the function (as with [defineNuxtMiddleware](/docs/bridge/bridge-composition-api#definenuxtmiddleware)).
+You may also keep using Nuxt 2-style plugins, by removing the function (as with [defineNuxtMiddleware](/docs/4.x/bridge/bridge-composition-api#definenuxtmiddleware)).
 
 Remove the `defineNuxtPlugin` wrapper:
 
@@ -113,7 +113,7 @@ export default <Plugin> function (ctx, inject) {}
 While this example is valid, Nuxt 3 introduces a new defineNuxtPlugin function that has a slightly different signature.
 ::
 
-:ReadMore{link="/docs/guide/directory-structure/app/plugins#creating-plugins"}
+:ReadMore{link="/docs/4.x/guide/directory-structure/app/plugins#creating-plugins"}
 
 ### `useRouter` and `useRoute`
 

package/6.bridge/4.plugins-and-middleware.md

@@ -9,8 +9,8 @@ You can now migrate to the Nuxt 3 plugins API, which is slightly different in fo
 
 Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/4.x/guide/directory-structure/plugins).
 
-```js [app/plugins/hello.ts]
-export default defineNuxtPlugin(nuxtApp => {
+```ts [app/plugins/hello.ts]
+export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.provide('injected', () => 'my injected function')
   // now available on `nuxtApp.$injected`
 })
@@ -54,9 +54,9 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     macros: {
-      pageMeta: true
-    }
-  }
+      pageMeta: true,
+    },
+  },
 })
 ```
 

package/6.bridge/5.nuxt3-compatible-api.md

@@ -73,8 +73,10 @@ You can access injected helpers using `useNuxtApp`.
 
 This helper function is not provided any more but you can replace it with the following code:
 
-```js
-const wrapProperty = (property, makeComputed = true) => () => {
+```ts
+import { computed, getCurrentInstance } from 'vue'
+
+const wrapProperty = (property: string, makeComputed = true) => () => {
   const vm = getCurrentInstance().proxy
   return makeComputed ? computed(() => vm[property]) : vm[property]
 }
@@ -136,7 +138,7 @@ In order to interact with `vue-meta`, you may use `useNuxt2Meta`, which will wor
 
 You can also pass in computed values or refs, and the meta values will be updated reactively:
 
-```ts
+```vue
 <script setup>
 const title = ref('my title')
 useNuxt2Meta({
@@ -165,10 +167,11 @@ You will also need to enable it explicitly in your `nuxt.config`:
 
 ```js
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
-    meta: true
-  }
+    meta: true,
+  },
 })
 ```
 
@@ -182,7 +185,7 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak
 
 ```vue
 <script setup lang="ts">
-import { ref, computed } from '#imports'
+import { computed, ref } from '#imports'
 
 const count = ref(1)
 const double = computed(() => count.value * 2)
@@ -196,9 +199,9 @@ If you want to disable auto-importing composables and utilities, you can set `im
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   imports: {
-    autoImport: false
-  }
+    autoImport: false,
+  },
 })
 ```
 
-This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/bridge/nuxt3-compatible-api#explicit-imports) from `#imports`.
+This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/4.x/bridge/nuxt3-compatible-api#explicit-imports) from `#imports`.

package/6.bridge/6.meta.md

@@ -13,11 +13,12 @@ If you need to use the Options API, there is a `head()` method you can use when
 
 ```js
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
     meta: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 
@@ -34,9 +35,9 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Meta description' }
-    ]
-  }
+      { hid: 'description', name: 'description', content: 'Meta description' },
+    ],
+  },
 }
 ```
 
@@ -48,10 +49,10 @@ export default defineNuxtConfig({
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-        { name: 'description', content: 'Meta description' }
-      ]
-    }
-  }
+        { name: 'description', content: 'Meta description' },
+      ],
+    },
+  },
 })
 ```
 
@@ -90,10 +91,10 @@ export default defineNuxtComponent({
     return {
       meta: [{
         name: 'description',
-        content: 'This is my page description.'
-      }]
+        content: 'This is my page description.',
+      }],
     }
-  }
+  },
 })
 </script>
 ```
@@ -110,8 +111,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>
 ```

package/6.bridge/8.nitro.md

@@ -14,8 +14,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 
 export default defineNuxtConfig({
   bridge: {
-    nitro: true
-  }
+    nitro: true,
+  },
 })
 ```
 

package/6.bridge/9.vite.md

@@ -19,8 +19,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     vite: true,
-    nitro: true
-  }
+    nitro: true,
+  },
 })
 ```
 
@@ -32,6 +32,6 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   vite: {
     // Config for Vite
-  }
+  },
 })
 ```

package/7.migration/10.bundling.md

@@ -16,7 +16,7 @@ If you need to configure any of Nuxt's build tools, you can do so in your `nuxt.
 
 In addition, Nuxt ships with TypeScript support.
 
-:read-more{to="/docs/guide/concepts/typescript"}
+:read-more{to="/docs/4.x/guide/concepts/typescript"}
 
 ## Steps
 

package/7.migration/11.server.md

@@ -5,7 +5,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 server.'
 
 In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means your site will be highly performant, and ultra-slim. But it also means you can no longer hook into runtime Nuxt server hooks.
 
-:read-more{to="/docs/guide/concepts/server-engine"}
+:read-more{to="/docs/4.x/guide/concepts/server-engine"}
 
 ## Steps
 
@@ -13,5 +13,5 @@ In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means y
 2. Any files in `~/server/api` and `~/server/middleware` will be automatically registered; you can remove them from your `serverMiddleware` array.
 3. Update any other items in your `serverMiddleware` array to point to files or npm packages directly, rather than using inline functions.
 
-:read-more{to="/docs/guide/directory-structure/server"}
-:read-more{to="/docs/guide/going-further/hooks#server-hooks-runtime"}
+:read-more{to="/docs/4.x/guide/directory-structure/server"}
+:read-more{to="/docs/4.x/guide/going-further/hooks#server-hooks-runtime"}

package/7.migration/2.configuration.md

@@ -40,8 +40,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
      router: {
        extendRoutes (routes) {
          //
-       }
-     }
+       },
+     },
    }
    ```
 
@@ -50,8 +50,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
      hooks: {
        'pages:extend' (routes) {
          //
-       }
-     }
+       },
+     },
    })
    ```
 
@@ -64,8 +64,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
    ```ts [Nuxt 2]
    export default {
      router: {
-       routeNameSplitter: '/'
-     }
+       routeNameSplitter: '/',
+     },
    }
    ```
 
@@ -78,8 +78,10 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
          const routeNameSplitter = '/'
          const root = createResolver(import.meta.url).resolve('./pages')
 
-         function updateName(routes) {
-           if (!routes) return
+         function updateName (routes) {
+           if (!routes) {
+             return
+           }
 
            for (const route of routes) {
              const relativePath = route.file.substring(root.length + 1)
@@ -138,7 +140,7 @@ If you are a module author, you can check out [more information about module com
 
 The `static/` (for storing static assets) has been renamed to `public/`. You can either rename your `static` directory to `public`, or keep the name by setting `dir.public` in your `nuxt.config`.
 
-:read-more{to="/docs/guide/directory-structure/public"}
+:read-more{to="/docs/4.x/guide/directory-structure/public"}
 
 ## TypeScript
 
@@ -200,10 +202,10 @@ yarn add pinia @pinia/nuxt
 Enable the module in your nuxt configuration:
 
 ```ts [nuxt.config.ts]
-import { defineNuxtConfig } from 'nuxt/config';
+import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  modules: ['@pinia/nuxt']
+  modules: ['@pinia/nuxt'],
 })
 ```
 
@@ -217,7 +219,7 @@ export const useMainStore = defineStore('main', {
     counter: 0,
   }),
   actions: {
-    increment() {
+    increment () {
       // `this` is the store instance
       this.counter++
     },
@@ -233,8 +235,8 @@ import { useMainStore } from '~/store'
 export default defineNuxtPlugin(({ $pinia }) => {
   return {
     provide: {
-      store: useMainStore($pinia)
-    }
+      store: useMainStore($pinia),
+    },
   }
 })
 ```
@@ -246,8 +248,8 @@ Once it's done you will need to add the following plugin to your Nuxt app:
 ```ts [app/plugins/vuex.ts]
 import store from '~/store'
 
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(store);
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(store)
 })
 ```
 

package/7.migration/20.module-authors.md

@@ -17,7 +17,7 @@ Explore Nuxt 3 compatible modules.
 
 Nuxt 3 plugins are **not** fully backward compatible with Nuxt 2.
 
-:read-more{to="/docs/guide/directory-structure/plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
 
 ### Vue Compatibility
 

package/7.migration/4.meta.md

@@ -14,7 +14,7 @@ You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style
 Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your meta tags, but implementation details may change.
 ::
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}
 
 ## Migration
 
@@ -31,18 +31,18 @@ Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your me
 export default {
   data: () => ({
     title: 'My App',
-    description: 'My App Description'
-  })
+    description: 'My App Description',
+  }),
   head () {
     return {
       title: this.title,
       meta: [{
         hid: 'description',
         name: 'description',
-        content: this.description
-      }]
+        content: this.description,
+      }],
     }
-  }
+  },
 }
 </script>
 ```
@@ -57,8 +57,8 @@ useHead({
   title,
   meta: [{
     name: 'description',
-    content: description
-  }]
+    content: description,
+  }],
 })
 </script>
 ```
@@ -80,10 +80,10 @@ export default {
       meta: [{
         hid: 'description',
         name: 'description',
-        content: 'My App Description'
-      }]
+        content: 'My App Description',
+      }],
     }
-  }
+  },
 }
 </script>
 ```
@@ -93,7 +93,10 @@ export default {
   <div>
     <Head>
       <Title>My App</Title>
-      <Meta name="description" content="My app description"/>
+      <Meta
+        name="description"
+        content="My app description"
+      />
     </Head>
     <!-- -->
   </div>
@@ -118,10 +121,10 @@ export default defineNuxtComponent({
     return {
       meta: [{
         name: 'description',
-        content: 'This is my page description.'
-      }]
+        content: 'This is my page description.',
+      }],
     }
-  }
+  },
 })
 </script>
 ```

package/7.migration/5.plugins-and-middleware.md

@@ -9,31 +9,31 @@ Plugins now have a different format, and take only one argument (`nuxtApp`).
 
 ::code-group
 
-```js [Nuxt 2]
+```ts [Nuxt 2]
 export default (ctx, inject) => {
   inject('injected', () => 'my injected function')
-})
+}
 ```
 
 ```ts [Nuxt 3]
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   // now available on `nuxtApp.$injected`
   nuxtApp.provide('injected', () => 'my injected function')
 
   // You can alternatively use this format, which comes with automatic type support
   return {
     provide: {
-      injected: () => 'my injected function'
-    }
+      injected: () => 'my injected function',
+    },
   }
 })
 ```
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
 
-::read-more{to="/docs/api/composables/use-nuxt-app"}
+::read-more{to="/docs/4.x/api/composables/use-nuxt-app"}
 Read more about the format of `nuxtApp`.
 ::
 
@@ -72,7 +72,7 @@ Much like Nuxt 2, route middleware placed in your `~/middleware` folder is autom
 
 `navigateTo` is one of a number of route helper functions.
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ### Migration