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

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

@@ -35,10 +35,13 @@ In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/n
 ```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,17 +89,20 @@ 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
 })
 ```
 
 This means if multiple layers define the same component, configuration, or file, the one with higher priority will be used.
 
-::read-more{to="/docs/guide/going-further/layers"}
+::read-more{to="/docs/4.x/guide/going-further/layers"}
 Read more about layers in the **Layer Author Guide**.
 ::
 

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

@@ -6,7 +6,7 @@ navigation.icon: i-lucide-file-code-2
 
 Nuxt allows for select pages from your application to be rendered at build time. Nuxt will serve the prebuilt pages when requested instead of generating them on the fly.
 
-:read-more{title="Nuxt rendering modes" to="/docs/guide/concepts/rendering"}
+:read-more{title="Nuxt rendering modes" to="/docs/4.x/guide/concepts/rendering"}
 
 ## Crawl-based Pre-rendering
 
@@ -45,7 +45,7 @@ Working of the Nitro crawler:
 
 This is important to understand since pages that are not linked to a discoverable page can't be pre-rendered automatically.
 
-::read-more{to="/docs/api/commands/generate#nuxt-generate"}
+::read-more{to="/docs/4.x/api/commands/generate#nuxt-generate"}
 Read more about the `nuxt generate` command.
 ::
 
@@ -57,11 +57,11 @@ You can manually specify routes that [Nitro](/docs/4.x/guide/concepts/server-eng
 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,14 +89,14 @@ 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"}
@@ -105,7 +105,7 @@ Read more about Nitro's `routeRules` configuration.
 
 As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/4.x/api/utils/define-route-rules).
 
-::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"}
+::read-more{to="/docs/4.x/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,9 +130,9 @@ This will be translated to:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   routeRules: {
-    "/": { prerender: true },
+    '/': { prerender: true },
   },
-});
+})
 ```
 
 ## Runtime Prerender Configuration
@@ -143,8 +143,8 @@ You can use this at runtime within a [Nuxt context](/docs/4.x/guide/going-furthe
 
 ```vue [app/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>
@@ -154,7 +154,7 @@ prerenderRoutes("/api/content/article/my-article");
 </template>
 ```
 
-:read-more{title="prerenderRoutes" to="/docs/api/utils/prerender-routes"}
+:read-more{title="prerenderRoutes" to="/docs/4.x/api/utils/prerender-routes"}
 
 ### `prerender:routes` Nuxt hook
 
@@ -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',
+    },
+  ],
 }
 ```
 
@@ -73,7 +73,7 @@ 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/4.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"}
+:read-more{title="Nuxt prerendering" to="/docs/4.x/getting-started/prerendering"}
 
 ### Client-side Only Rendering
 
@@ -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,
 })
 ```
 
@@ -97,11 +97,11 @@ In addition to Node.js servers and static hosting services, a Nuxt project can b
 
 You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.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

@@ -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,7 +434,7 @@ import { registerEndpoint } from '@nuxt/test-utils/runtime'
 
 registerEndpoint('/test/', {
   method: 'POST',
-  handler: () => ({ test: 'test-field' })
+  handler: () => ({ test: 'test-field' }),
 })
 ```
 
@@ -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({
@@ -624,7 +624,7 @@ Please use the options below for the `setup` method.
   - Type: `number | undefined`
   - Default: `undefined`
 
-- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](/docs/getting-started/testing#target-host-end-to-end-example).
+- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](/docs/4.x/getting-started/testing#target-host-end-to-end-example).
   - Type: `string`
   - Default: `undefined`
 
@@ -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
-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 }) => {