@nuxt/docs 3.19.2 → 3.20.0

package/1.getting-started/13.server.md

@@ -74,10 +74,10 @@ export default defineNuxtConfig({
     '/api/*': { cache: { maxAge: 60 * 60 } },
     // Redirection to avoid 404
     '/old-page': {
-      redirect: { to: '/new-page', statusCode: 302 }
-    }
+      redirect: { to: '/new-page', statusCode: 302 },
+    },
     // ...
-  }
+  },
 })
 ```
 

package/1.getting-started/14.layers.md

@@ -9,8 +9,8 @@ One of the core features of Nuxt is the layers and extending support. You can ex
 ## Use Cases
 
 - Share reusable configuration presets across projects using `nuxt.config` and `app.config`
-- Create a component library using [`components/`](/docs/guide/directory-structure/components) directory
-- Create utility and composable library using [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils) directories
+- Create a component library using [`components/`](/docs/3.x/guide/directory-structure/components) directory
+- Create utility and composable library using [`composables/`](/docs/3.x/guide/directory-structure/composables) and [`utils/`](/docs/3.x/guide/directory-structure/utils) directories
 - Create Nuxt module presets
 - Share standard setup across projects
 - Create Nuxt themes
@@ -30,15 +30,18 @@ In addition, named layer aliases to the `srcDir` of each of these layers will au
 Named layer aliases were introduced in Nuxt v3.16.0.
 ::
 
-In addition, you can extend from a layer by adding the [extends](/docs/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file.
+In addition, you can extend from a layer by adding the [extends](/docs/3.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/3.x/guide/directory-structure/nuxt-config) file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    '../base',                     // Extend from a local layer
-    '@my-themes/awesome',          // Extend from an installed npm package
-    'github:my-themes/awesome#v1', // Extend from a git repository
-  ]
+    // Extend from a local layer
+    '../base',
+    // Extend from an installed npm package
+    '@my-themes/awesome',
+    // Extend from a git repository
+    'github:my-themes/awesome#v1',
+  ],
 })
 ```
 
@@ -48,8 +51,8 @@ You can also pass an authentication token if you are extending from a private Gi
 export default defineNuxtConfig({
   extends: [
     // per layer configuration
-    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
-  ]
+    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }],
+  ],
 })
 ```
 
@@ -61,13 +64,13 @@ export default defineNuxtConfig({
   extends: [
     [
       'github:my-themes/awesome',
-      { 
+      {
         meta: {
           name: 'my-awesome-theme',
         },
       },
     ],
-  ]
+  ],
 })
 ```
 
@@ -86,10 +89,13 @@ When using multiple layers, it's important to understand how they override each
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    '../base',                     // Highest priority (among extends)
-    '@my-themes/awesome',          // Medium priority
-    'github:my-themes/awesome#v1', // Lower priority
-  ]
+    // Highest priority (among extends)
+    '../base',
+    // Medium priority
+    '@my-themes/awesome',
+    // Lower priority
+    'github:my-themes/awesome#v1',
+  ],
   // Your project has the highest priority
 })
 ```

package/1.getting-started/15.prerendering.md

@@ -10,7 +10,7 @@ Nuxt allows for select pages from your application to be rendered at build time.
 
 ## Crawl-based Pre-rendering
 
-Use the [`nuxt generate` command](/docs/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
+Use the [`nuxt generate` command](/docs/3.x/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/3.x/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
 
 This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on.
 
@@ -51,17 +51,17 @@ Read more about the `nuxt generate` command.
 
 ### Selective Pre-rendering
 
-You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
+You can manually specify routes that [Nitro](/docs/3.x/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   nitro: {
     prerender: {
-      routes: ["/user/1", "/user/2"],
-      ignore: ["/dynamic"],
+      routes: ['/user/1', '/user/2'],
+      ignore: ['/dynamic'],
     },
   },
-});
+})
 ```
 
 You can combine this with the `crawlLinks` option to pre-render a set of routes that the crawler can't discover like your `/sitemap.xml` or `/robots.txt`:
@@ -71,10 +71,10 @@ export default defineNuxtConfig({
   nitro: {
     prerender: {
       crawlLinks: true,
-      routes: ["/sitemap.xml", "/robots.txt"],
+      routes: ['/sitemap.xml', '/robots.txt'],
     },
   },
-});
+})
 ```
 
 Setting `nitro.prerender` to `true` is similar to `nitro.prerender.crawlLinks` to `true`.
@@ -89,21 +89,21 @@ Lastly, you can manually configure this using routeRules.
 export default defineNuxtConfig({
   routeRules: {
     // Set prerender to true to configure it to be prerendered
-    "/rss.xml": { prerender: true },
+    '/rss.xml': { prerender: true },
     // Set it to false to configure it to be skipped for prerendering
-    "/this-DOES-NOT-get-prerendered": { prerender: false },
+    '/this-DOES-NOT-get-prerendered': { prerender: false },
     // Everything under /blog gets prerendered as long as it
     // is linked to from another page
-    "/blog/**": { prerender: true },
+    '/blog/**': { prerender: true },
   },
-});
+})
 ```
 
 ::read-more{to="https://nitro.build/config#routerules"}
 Read more about Nitro's `routeRules` configuration.
 ::
 
-As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/api/utils/define-route-rules).
+As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/3.x/api/utils/define-route-rules).
 
 ::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"}
 This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
@@ -114,7 +114,7 @@ This feature is experimental and in order to use it you must enable the `experim
 // Or set at the page level
 defineRouteRules({
   prerender: true,
-});
+})
 </script>
 
 <template>
@@ -130,21 +130,21 @@ This will be translated to:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   routeRules: {
-    "/": { prerender: true },
+    '/': { prerender: true },
   },
-});
+})
 ```
 
 ## Runtime Prerender Configuration
 
 ### `prerenderRoutes`
 
-You can use this at runtime within a [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
+You can use this at runtime within a [Nuxt context](/docs/3.x/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
 
 ```vue [pages/index.vue]
 <script setup>
-prerenderRoutes(["/some/other/url"]);
-prerenderRoutes("/api/content/article/my-article");
+prerenderRoutes(['/some/other/url'])
+prerenderRoutes('/api/content/article/my-article')
 </script>
 
 <template>
@@ -163,16 +163,16 @@ This is called before prerendering for additional routes to be registered.
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   hooks: {
-    async "prerender:routes"(ctx) {
-      const { pages } = await fetch("https://api.some-cms.com/pages").then(
-        (res) => res.json(),
-      );
+    async 'prerender:routes' (ctx) {
+      const { pages } = await fetch('https://api.some-cms.com/pages').then(
+        res => res.json(),
+      )
       for (const page of pages) {
-        ctx.routes.add(`/${page.name}`);
+        ctx.routes.add(`/${page.name}`)
       }
     },
   },
-});
+})
 ```
 
 ### `prerender:generate` Nitro hook
@@ -183,12 +183,12 @@ This is called for each route during prerendering. You can use this for fine-gra
 export default defineNuxtConfig({
   nitro: {
     hooks: {
-      "prerender:generate"(route) {
-        if (route.route?.includes("private")) {
-          route.skip = true;
+      'prerender:generate' (route) {
+        if (route.route?.includes('private')) {
+          route.skip = true
         }
       },
     },
   },
-});
+})
 ```

package/1.getting-started/16.deployment.md

@@ -48,9 +48,9 @@ module.exports = {
       port: '3000',
       exec_mode: 'cluster',
       instances: 'max',
-      script: './.output/server/index.mjs'
-    }
-  ]
+      script: './.output/server/index.mjs',
+    },
+  ],
 }
 ```
 
@@ -71,7 +71,7 @@ By default, the workload gets distributed to the workers with the round robin st
 There are two ways to deploy a Nuxt application to any static hosting services:
 
 - Static site generation (SSG) with `ssr: true` pre-renders routes of your application at build time. (This is the default behavior when running `nuxt generate`.) It will also generate `/200.html` and `/404.html` single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host).
-- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
+- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/3.x/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
 
 :read-more{title="Nuxt prerendering" to="/docs/getting-started/prerendering"}
 
@@ -81,7 +81,7 @@ If you don't want to pre-render your routes, another way of using static hosting
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  ssr: false
+  ssr: false,
 })
 ```
 
@@ -95,13 +95,13 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
 
 In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
 
-You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
+You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file:
 
-```js twoslash [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   nitro: {
-    preset: 'node-server'
-  }
+    preset: 'node-server',
+  },
 })
 ```
 

package/1.getting-started/17.testing.md

@@ -5,7 +5,7 @@ navigation.icon: i-lucide-circle-check
 ---
 
 ::tip
-If you are a module author, you can find more specific information in the [Module Author's guide](/docs/guide/going-further/modules#testing).
+If you are a module author, you can find more specific information in the [Module Author's guide](/docs/3.x/guide/going-further/modules#testing).
 ::
 
 Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
@@ -46,8 +46,8 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
    ```ts twoslash
    export default defineNuxtConfig({
      modules: [
-       '@nuxt/test-utils/module'
-     ]
+       '@nuxt/test-utils/module',
+     ],
    })
    ```
 
@@ -115,7 +115,7 @@ export default defineVitestConfig({
     //     }
     //   }
     // }
-  }
+  },
 })
 ```
 
@@ -199,10 +199,10 @@ export default defineVitestConfig({
         mock: {
           intersectionObserver: true,
           indexedDb: true,
-        }
-      }
-    }
-  }
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -222,8 +222,9 @@ For example:
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 import type { Component } from 'vue'
+
 declare module '#components' {
   export const SomeComponent: Component
 }
@@ -233,17 +234,16 @@ import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { SomeComponent } from '#components'
 
 it('can mount some component', async () => {
-    const component = await mountSuspended(SomeComponent)
-    expect(component.text()).toMatchInlineSnapshot(
-        '"This is an auto-imported component"'
-    )
+  const component = await mountSuspended(SomeComponent)
+  expect(component.text()).toMatchInlineSnapshot(
+    '"This is an auto-imported component"',
+  )
 })
-
 ```
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 // ---cut---
 // tests/components/SomeComponents.nuxt.spec.ts
 import { mountSuspended } from '@nuxt/test-utils/runtime'
@@ -251,8 +251,8 @@ import App from '~/app.vue'
 
 // tests/App.nuxt.spec.ts
 it('can also mount an app', async () => {
-    const component = await mountSuspended(App, { route: '/test' })
-    expect(component.html()).toMatchInlineSnapshot(`
+  const component = await mountSuspended(App, { route: '/test' })
+  expect(component.html()).toMatchInlineSnapshot(`
       "<div>This is an auto-imported component</div>
       <div> I am a global component </div>
       <div>/</div>
@@ -275,8 +275,9 @@ Examples:
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 import type { Component } from 'vue'
+
 declare module '#components' {
   export const SomeComponent: Component
 }
@@ -294,7 +295,7 @@ it('can render some component', async () => {
 
 ```ts twoslash
 // @noErrors
-import { it, expect } from 'vitest'
+import { expect, it } from 'vitest'
 // ---cut---
 // tests/App.nuxt.spec.ts
 import { renderSuspended } from '@nuxt/test-utils/runtime'
@@ -341,8 +342,8 @@ import { mockNuxtImport } from '@nuxt/test-utils/runtime'
 const { useStorageMock } = vi.hoisted(() => {
   return {
     useStorageMock: vi.fn(() => {
-      return { value: 'mocked storage'}
-    })
+      return { value: 'mocked storage' }
+    }),
   }
 })
 
@@ -369,20 +370,20 @@ import { mockComponent } from '@nuxt/test-utils/runtime'
 
 mockComponent('MyComponent', {
   props: {
-    value: String
+    value: String,
   },
-  setup(props) {
+  setup (props) {
     // ...
-  }
+  },
 })
 
 // relative path or alias also works
-mockComponent('~/components/my-component.vue', async () => {
+mockComponent('~/components/my-component.vue', () => {
   // or a factory function
   return defineComponent({
-    setup(props) {
+    setup (props) {
       // ...
-    }
+    },
   })
 })
 
@@ -401,10 +402,10 @@ mockComponent('MyComponent', async () => {
   const { ref, h } = await import('vue')
 
   return defineComponent({
-    setup(props) {
+    setup (props) {
       const counter = ref(0)
       return () => h('div', null, counter.value)
-    }
+    },
   })
 })
 ```
@@ -422,7 +423,7 @@ For example, to mock `/test/` endpoint, you can do:
 import { registerEndpoint } from '@nuxt/test-utils/runtime'
 
 registerEndpoint('/test/', () => ({
-  test: 'test-field'
+  test: 'test-field',
 }))
 ```
 
@@ -433,11 +434,11 @@ import { registerEndpoint } from '@nuxt/test-utils/runtime'
 
 registerEndpoint('/test/', {
   method: 'POST',
-  handler: () => ({ test: 'test-field' })
+  handler: () => ({ test: 'test-field' }),
 })
 ```
 
-> **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
+> **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/3.x/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
 
 #### Conflict with End-To-End Testing
 
@@ -455,13 +456,12 @@ mockNuxtImport('useStorage', () => {
     return { value: 'mocked storage' }
   }
 })
-
 ```
 
 `app.e2e.spec.ts`
 
 ```ts twoslash
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
 
 await setup({
   setupTimeout: 10000,
@@ -502,7 +502,7 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
      test: {
        environment: 'happy-dom',
      },
-   });
+   })
    ```
 
 3. Add a new command for test in your `package.json`
@@ -527,7 +527,7 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
 5. Create a simple unit test for this newly created component `~/components/HelloWorld.spec.ts`
 
    ```ts twoslash
-   import { describe, it, expect } from 'vitest'
+   import { describe, expect, it } from 'vitest'
    import { mount } from '@vue/test-utils'
 
    import HelloWorld from './HelloWorld.vue'
@@ -569,7 +569,7 @@ In each `describe` block where you are taking advantage of the `@nuxt/test-utils
 
 ```ts twoslash [test/my-test.spec.ts]
 import { describe, test } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
 
 describe('My test', async () => {
   await setup({
@@ -648,8 +648,8 @@ For local development or automated deploy pipelines, testing against a separate
 To utilize a separate target host for end-to-end tests, simply provide the `host` property of the `setup` function with the desired URL.
 
 ```ts twoslash
-import { setup, createPage } from '@nuxt/test-utils/e2e'
-import { describe, it, expect } from 'vitest'
+import { createPage, setup } from '@nuxt/test-utils/e2e'
+import { describe, expect, it } from 'vitest'
 
 describe('login page', async () => {
   await setup({
@@ -742,8 +742,8 @@ import type { ConfigOptions } from '@nuxt/test-utils/playwright'
 export default defineConfig<ConfigOptions>({
   use: {
     nuxt: {
-      rootDir: fileURLToPath(new URL('.', import.meta.url))
-    }
+      rootDir: fileURLToPath(new URL('.', import.meta.url)),
+    },
   },
   // ...
 })
@@ -770,8 +770,8 @@ import { expect, test } from '@nuxt/test-utils/playwright'
 
 test.use({
   nuxt: {
-    rootDir: fileURLToPath(new URL('..', import.meta.url))
-  }
+    rootDir: fileURLToPath(new URL('..', import.meta.url)),
+  },
 })
 
 test('test', async ({ page, goto }) => {