@nuxt/docs-nightly 4.1.3-29314777.50febbbb → 4.1.3-29316215.910d159d

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

@@ -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"}
@@ -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>
@@ -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',
+    },
+  ],
 }
 ```
 
@@ -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({
@@ -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 }) => {

package/1.getting-started/18.upgrade.md

@@ -186,8 +186,8 @@ export default defineNuxtConfig({
   srcDir: '.',
   // This specifies the directory prefix for `router.options.ts` and `spa-loading-template.html`
   dir: {
-    app: 'app'
-  }
+    app: 'app',
+  },
 })
 ```
 
@@ -224,14 +224,14 @@ These changes have been made to improve memory usage and increase consistency wi
    It may be beneficial to extract any calls to `useAsyncData` that share an explicit key (and have custom options) into their own composable:
 
    ```ts [app/composables/useUserData.ts]
-   export function useUserData(userId: string) {
+   export function useUserData (userId: string) {
      return useAsyncData(
        `user-${userId}`,
        () => fetchUser(userId),
-       { 
+       {
          deep: true,
-         transform: (user) => ({ ...user, lastAccessed: new Date() })
-       }
+         transform: user => ({ ...user, lastAccessed: new Date() }),
+       },
      )
    }
    ```
@@ -260,8 +260,8 @@ Alternatively, for now, you can disable this behaviour with:
 export default defineNuxtConfig({
   experimental: {
     granularCachedData: false,
-    purgeCachedData: false
-  }
+    purgeCachedData: false,
+  },
 })
 ```
 
@@ -303,18 +303,18 @@ Example of the new correct order:
 ```ts
 // Layer: my-layer/nuxt.config.ts
 export default defineNuxtConfig({
-  modules: ['layer-module-1', 'layer-module-2']
+  modules: ['layer-module-1', 'layer-module-2'],
 })
 
 // Project: nuxt.config.ts
 export default defineNuxtConfig({
   extends: ['./my-layer'],
-  modules: ['project-module-1', 'project-module-2']
+  modules: ['project-module-1', 'project-module-2'],
 })
 
 // Loading order (corrected):
 // 1. layer-module-1
-// 2. layer-module-2  
+// 2. layer-module-2
 // 3. project-module-1 (can override layer modules)
 // 4. project-module-2 (can override layer modules)
 ```
@@ -380,8 +380,8 @@ Alternatively, for now, you can disable this behaviour with:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    normalizeComponentNames: false
-  }
+    normalizeComponentNames: false,
+  },
 })
 ```
 
@@ -420,14 +420,14 @@ useHead({
 * If you're using [Template Params](https://unhead.unjs.io/docs/head/guides/plugins/template-params) or [Alias Tag Sorting](https://unhead.unjs.io/docs/head/guides/plugins/alias-sorting), you will need to explicitly opt in to these features now.
 
 ```ts
-import { TemplateParamsPlugin, AliasSortingPlugin } from '@unhead/vue/plugins'
+import { AliasSortingPlugin, TemplateParamsPlugin } from '@unhead/vue/plugins'
 
 export default defineNuxtPlugin({
-  setup() {
+  setup () {
     const unhead = injectHead()
     unhead.use(TemplateParamsPlugin)
     unhead.use(AliasSortingPlugin)
-  }
+  },
 })
 ```
 
@@ -444,7 +444,7 @@ If you still have issues you may revert to the v1 behavior by enabling the `head
 export default defineNuxtConfig({
   unhead: {
     legacy: true,
-  }
+  },
 })
 ```
 
@@ -483,7 +483,7 @@ Alternatively, you can revert to the previous behaviour with:
 export default defineNuxtConfig({
   experimental: {
     spaLoadingTemplateLocation: 'within',
-  }
+  },
 })
 ```
 
@@ -527,8 +527,8 @@ This feature is fully configurable and you can revert to the previous behavior b
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   features: {
-    inlineStyles: true
-  }
+    inlineStyles: true,
+  },
 })
 ```
 
@@ -566,8 +566,8 @@ Alternatively, you can revert to the previous behaviour with:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    scanPageMeta: true
-  }
+    scanPageMeta: true,
+  },
 })
 ```
 
@@ -607,8 +607,8 @@ Alternatively, you can disable this feature with:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    sharedPrerenderData: false
-  }
+    sharedPrerenderData: false,
+  },
 })
 ```
 
@@ -632,24 +632,6 @@ If you were checking if `data.value` or `error.value` were `null`, you can updat
 You can automate this step by running `npx codemod@latest nuxt/4/default-data-error-value`
 ::
 
-If you encounter any issues you can revert back to the previous behavior with:
-
-```ts twoslash [nuxt.config.ts]
-// @errors: 2353
-export default defineNuxtConfig({
-  experimental: {
-    defaults: {
-      useAsyncData: {
-        value: 'null',
-        errorValue: 'null'
-      }
-    }
-  }
-})
-```
-
-Please report an issue if you are doing this, as we do not plan to keep this as configurable.
-
 ### Removal of deprecated `boolean` values for `dedupe` option when calling `refresh` in `useAsyncData` and `useFetch`
 
 🚦 **Impact Level**: Minimal
@@ -660,7 +642,7 @@ Previously it was possible to pass `dedupe: boolean` to `refresh`. These were al
 
 ```ts twoslash [app/app.vue]
 // @errors: 2322
-const { refresh } = await useAsyncData(async () => ({ message: 'Hello, Nuxt!' }))
+const { refresh } = await useAsyncData(() => Promise.resolve({ message: 'Hello, Nuxt!' }))
 
 async function refreshData () {
   await refresh({ dedupe: true })
@@ -748,8 +730,8 @@ Alternatively, you can temporarily revert to the previous behavior with:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    pendingWhenIdle: true
-  }
+    pendingWhenIdle: true,
+  },
 })
 ```
 
@@ -788,8 +770,8 @@ To opt out of this behavior:
 // Or globally in your Nuxt config
 export default defineNuxtConfig({
   experimental: {
-    alwaysRunFetchOnKeyChange: true
-  }
+    alwaysRunFetchOnKeyChange: true,
+  },
 })
 ```
 
@@ -822,10 +804,10 @@ In most cases, no migration steps are required, but if you rely on the reactivit
      experimental: {
        defaults: {
          useAsyncData: {
-           deep: true
-         }
-       }
-     }
+           deep: true,
+         },
+       },
+     },
    })
    ```
 
@@ -904,10 +886,10 @@ Probably no migration is necessary but if you wish to revert to previous behavio
 ```ts
 export default defineNuxtConfig({
   hooks: {
-    'app:resolve'(app) {
+    'app:resolve' (app) {
       app.middleware = app.middleware.filter(mw => !/\/index\.[^/]+$/.test(mw.path))
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -957,7 +939,7 @@ Finally, if you are using the template utilities (`serialize`, `importName`, `im
 ```ts
 import { genDynamicImport, genImport, genSafeVariableName } from 'knitwork'
 
-const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1'))
+const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"\{(.+)\}"(?=,?$)/gm, r => JSON.parse(r).replace(/^\{(.*)\}$/, '$1'))
 
 const importSources = (sources: string | string[], { lazy = false } = {}) => {
   return toArray(sources).map((src) => {
@@ -1002,10 +984,10 @@ There are two approaches:
      typescript: {
        tsConfig: {
          compilerOptions: {
-           noUncheckedIndexedAccess: false
-         }
-       }
-     }
+           noUncheckedIndexedAccess: false,
+         },
+       },
+     },
    })
    ```
 
@@ -1090,16 +1072,16 @@ However, to take advantage of improved type checking, you can opt in to the new
        // Customize app/server TypeScript config
        tsConfig: {
          compilerOptions: {
-           strict: true
-         }
+           strict: true,
+         },
        },
-       // Customize build-time TypeScript config  
+       // Customize build-time TypeScript config
        nodeTsConfig: {
          compilerOptions: {
-           strict: true
-         }
-       }
-     }
+           strict: true,
+         },
+       },
+     },
    })
    ```