@nuxt/docs 3.20.1 → 3.21.0

package/7.migration/2.configuration.md

@@ -115,7 +115,7 @@ Nuxt has built-in support for loading `.env` files. Avoid directly importing it
 
 ## Modules
 
-Nuxt and Nuxt Modules are now build-time-only.
+Nuxt and Nuxt modules are now build-time-only.
 
 ### Migration
 
@@ -133,14 +133,14 @@ Nuxt and Nuxt Modules are now build-time-only.
 ```
 
 ::tip
-If you are a module author, you can check out [more information about module compatibility](/docs/3.x/migration/module-authors) and [our module author guide](/docs/3.x/guide/going-further/modules).
+If you are a module author, you can check out [more information about module compatibility](/docs/3.x/migration/module-authors) and [our module author guide](/docs/3.x/guide/modules).
 ::
 
 ## Directory Changes
 
 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/3.x/directory-structure/public"}
 
 ## TypeScript
 
@@ -163,13 +163,13 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
    ```
 
 1. Run `npx nuxt prepare` to generate `.nuxt/tsconfig.json`.
-1. Install Volar following the instructions in the [docs](/docs/3.x/getting-started/introduction#prerequisites).
+1. Install Volar following the instructions in the [docs](/docs/3.x/getting-started/installation#prerequisites).
 
 ## Vue Changes
 
 There are a number of changes to what is recommended Vue best practice, as well as a number of breaking changes between Vue 2 and 3.
 
-It is recommended to read the [Vue 3 migration guide](https://v3-migration.vuejs.org) and in particular the [breaking changes list](https://v3-migration.vuejs.org/breaking-changes).
+It is recommended to read the [Vue 3 migration guide](https://v3-migration.vuejs.org) and in particular the [breaking changes list](https://v3-migration.vuejs.org/breaking-changes/).
 
 It is not currently possible to use the [Vue 3 migration build](https://v3-migration.vuejs.org/migration-build.html) with Nuxt 3.
 
@@ -213,7 +213,7 @@ export const useMainStore = defineStore('main', {
 })
 ```
 
-Create a [plugin](/docs/3.x/guide/directory-structure/plugins) file to globalize your store:
+Create a [plugin](/docs/3.x/directory-structure/plugins) file to globalize your store:
 
 ```ts [plugins/pinia.ts]
 import { useMainStore } from '~/store'

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

@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 modules.'
 
 Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/kit` auto wrappers. But there are usually steps to follow to make modules compatible with Nuxt 3 and sometimes, using Nuxt Bridge is required for cross-version compatibility.
 
-We have prepared a [Dedicated Guide](/docs/3.x/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
+We have prepared a [Dedicated Guide](/docs/3.x/guide/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
 
 ::tip{icon="i-lucide-puzzle" to="/modules"}
 Explore Nuxt 3 compatible modules.
@@ -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/3.x/directory-structure/plugins"}
 
 ### Vue Compatibility
 
@@ -78,7 +78,7 @@ Your module should work even if it's only added to [`buildModules`](/docs/3.x/ap
 (*) Unless it is for `nuxt dev` purpose only and guarded with `if (nuxt.options.dev) { }`.
 
 ::tip
-Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/3.x/guide/going-further/modules).
+Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/3.x/guide/modules).
 ::
 
 ### Use TypeScript (Optional)

package/7.migration/3.auto-imports.md

@@ -11,7 +11,7 @@ In the rest of the migration documentation, you will notice that key Nuxt and Vu
 
 ## Migration
 
-1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/3.x/guide/directory-structure/components) for more information.
+1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/3.x/directory-structure/components) for more information.
 
 ::tip
 You can look at `.nuxt/types/components.d.ts` and `.nuxt/types/imports.d.ts` to see how Nuxt has resolved your components and composable auto-imports.

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/3.x/getting-started/seo-meta"}
 
 ## Migration
 

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

@@ -31,9 +31,9 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/plugins"}
+:read-more{to="/docs/3.x/directory-structure/plugins"}
 
-::read-more{to="/docs/api/composables/use-nuxt-app"}
+::read-more{to="/docs/3.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/middleware"}
+:read-more{to="/docs/3.x/directory-structure/middleware"}
 
 ### Migration
 

package/7.migration/6.pages-and-layouts.md

@@ -13,19 +13,19 @@ If you don't have an `app.vue` file in your source directory, Nuxt will use its
 
 This file is a great place to put any custom code that needs to be run once when your app starts up, as well as any components that are present on every page of your app. For example, if you only have one layout, you can move this to `app.vue` instead.
 
-:read-more{to="/docs/guide/directory-structure/app"}
+:read-more{to="/docs/3.x/directory-structure/app"}
 
-:link-example{to="/docs/examples/hello-world"}
+:link-example{to="/docs/3.x/examples/hello-world"}
 
 ### Migration
 
-Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/3.x/guide/directory-structure/app).
+Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/3.x/directory-structure/app).
 
 ## Layouts
 
 If you are using layouts in your app for multiple pages, there is only a slight change required.
 
-In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/3.x/guide/directory-structure/layouts).
+In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/3.x/directory-structure/layouts).
 
 You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `layouts/customLayout.vue` becomes `custom-layout` when referenced in your page.
 
@@ -54,7 +54,7 @@ You will also need to change how you define the layout used by a page using the
     - }
       </script>
     ```
-3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/3.x/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/3.x/guide/directory-structure/layouts) directly within `error.vue`:
+3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/3.x/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/3.x/directory-structure/layouts) directly within `error.vue`:
     ```vue [error.vue]
     <template>
       <div>
@@ -67,7 +67,7 @@ You will also need to change how you define the layout used by a page using the
 
 ## Pages
 
-Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`pages/`](/docs/3.x/guide/directory-structure/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
+Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`pages/`](/docs/3.x/directory-structure/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
 
 ### Dynamic Routes
 
@@ -84,13 +84,13 @@ In Nuxt 2, you will have defined any nested routes (with parent and child compon
 
 If you were passing a custom page key or keep-alive props to `<Nuxt>`, you will now use `definePageMeta` to set these options.
 
-:read-more{to="/docs/guide/directory-structure/pages#special-metadata"}
+:read-more{to="/docs/3.x/directory-structure/pages#special-metadata"}
 
 ### Page and Layout Transitions
 
 If you have been defining transitions for your page or layout directly in your component options, you will now need to use `definePageMeta` to set the transition. Since Vue 3, [-enter and -leave CSS classes have been renamed](https://v3-migration.vuejs.org/breaking-changes/transition.html). The `style` prop from `<Nuxt>` no longer applies to transition when used on `<slot>`, so move the styles to your `-active` class.
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/3.x/getting-started/transitions"}
 
 ### Migration
 
@@ -190,7 +190,7 @@ Most of the syntax and functionality are the same for the global [NuxtLink](/doc
 
 `<NuxtLink>` is now a drop-in replacement for _all_ links, even external ones. You can read more about it, and how to extend it to provide your own link component.
 
-:read-more{to="/docs/api/components/nuxt-link"}
+:read-more{to="/docs/3.x/api/components/nuxt-link"}
 
 ## Programmatic Navigation
 

package/7.migration/7.component-options.md

@@ -67,7 +67,7 @@ Despite the names, [`useFetch`](/docs/3.x/api/composables/use-fetch) is not a di
 
 ## `head`
 
-:read-more{to="/docs/migration/meta"}
+:read-more{to="/docs/3.x/migration/meta"}
 
 ## `key`
 
@@ -91,7 +91,7 @@ You can now define a key within the [`definePageMeta`](/docs/3.x/api/utils/defin
 
 ## `layout`
 
-:read-more{to="/docs/migration/pages-and-layouts"}
+:read-more{to="/docs/3.x/migration/pages-and-layouts"}
 
 ## `loading`
 
@@ -99,11 +99,11 @@ This feature is not yet supported in Nuxt 3.
 
 ## `middleware`
 
-:read-more{to="/docs/migration/plugins-and-middleware"}
+:read-more{to="/docs/3.x/migration/plugins-and-middleware"}
 
 ## `scrollToTop`
 
-This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in `~/app/router.options.ts` (see [docs](/docs/3.x/guide/recipes/custom-routing#router-options)) for more info.
+This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in an `~/app/router.options.ts` (see [docs](/docs/3.x/guide/recipes/custom-routing#router-options)) for more info.
 Similar to `key`, specify it within the [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) compiler macro.
 
 ```diff [pages/index.vue]
@@ -120,11 +120,11 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/3.x/api/utils/d
 
 ## `transition`
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/3.x/getting-started/transitions"}
 
 ## `validate`
 
-The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
+The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
 
 ```diff [pages/users/[id\\].vue]
 - <script>

package/7.migration/8.runtime-config.md

@@ -9,7 +9,7 @@ When referencing these variables within your components, you will have to use th
 
 In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/3.x/api/composables/use-runtime-config) without any import.
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/3.x/guide/going-further/runtime-config"}
 
 ## Migration
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs",
-  "version": "3.20.1",
+  "version": "3.21.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",

package/2.guide/0.index.md

@@ -1,25 +0,0 @@
----
-title: 'Nuxt Guide'
-titleTemplate: '%s'
-description: 'Learn how Nuxt works with in-depth guides.'
-navigation: false
-surround: false
----
-
-::card-group{class="sm:grid-cols-1"}
-  ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/guide/directory-structure"}
-  Learn about Nuxt directory structure and what benefits each directory or file offers.
-  ::
-  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/guide/concepts"}
-  Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
-  ::
-  ::card{icon="i-lucide-star" title="Going Further" to="/docs/guide/going-further"}
-  Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
-  ::
-  ::card{icon="i-lucide-book-open" title="Recipes" to="/docs/guide/recipes"}
-  Find solutions to common problems and learn how to implement them in your Nuxt project.
-  ::
-  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/guide/best-practices"}
-  Learn about best practices when developing with Nuxt
-  ::
-::

package/2.guide/3.going-further/1.features.md

@@ -1,103 +0,0 @@
----
-title: "Features"
-description: "Enable or disable optional Nuxt features to unlock new possibilities."
----
-
-Some features of Nuxt are available on an opt-in basis, or can be disabled based on your needs.
-
-## `features`
-
-### inlineStyles
-
-Inlines styles when rendering HTML. This is currently available only when using Vite.
-
-You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  features: {
-    inlineStyles: false, // or a function to determine inlining
-  },
-})
-```
-
-### noScripts
-
-Disables rendering of Nuxt scripts and JS resource hints. Can also be configured granularly within `routeRules`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  features: {
-    noScripts: true,
-  },
-})
-```
-
-## `future`
-
-There is also a `future` namespace for early opting-in to new features that will become default in a future (possibly major) version of the framework.
-
-### compatibilityVersion
-
-::important
-This configuration option is available in Nuxt v3.12+. Please note, that for now, you need to define the compatibility version in each layer that opts into Nuxt 4 behavior. This will not be required after Nuxt 4 is released.
-::
-
-This enables early access to Nuxt features or flags.
-
-Setting `compatibilityVersion` to `4` changes defaults throughout your
-Nuxt configuration to opt-in to Nuxt v4 behaviour, but you can granularly re-enable Nuxt v3 behaviour
-when testing (see example). Please file issues if so, so that we can
-address in Nuxt or in the ecosystem.
-
-```ts
-export default defineNuxtConfig({
-  future: {
-    compatibilityVersion: 4,
-  },
-  // To re-enable _all_ Nuxt v3 behaviour, set the following options:
-  srcDir: '.',
-  dir: {
-    app: 'app',
-  },
-  experimental: {
-    scanPageMeta: 'after-resolve',
-    sharedPrerenderData: false,
-    compileTemplate: true,
-    resetAsyncDataToUndefined: true,
-    templateUtils: true,
-    relativeWatchPaths: true,
-    normalizeComponentNames: false,
-    defaults: {
-      useAsyncData: {
-        deep: true,
-      },
-    },
-  },
-  features: {
-    inlineStyles: true,
-  },
-  unhead: {
-    renderSSRHeadOptions: {
-      omitLineBreaks: false,
-    },
-  },
-})
-```
-
-### typescriptBundlerResolution
-
-This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
-for frameworks like Nuxt and [Vite](https://vite.dev/guide/performance.html#reduce-resolve-operations).
-
-It improves type support when using modern libraries with `exports`.
-
-See [the original TypeScript pull request](https://github.com/microsoft/TypeScript/pull/51669).
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  future: {
-    typescriptBundlerResolution: true,
-  },
-})
-```