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

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,
+         },
+       },
+     },
    })
    ```
 
@@ -1195,7 +1177,7 @@ Static sites             | ✅             | ✅                | ✅
 
 The migration guide provides a step-by-step comparison of Nuxt 2 features to Nuxt 3+ features and guidance to adapt your current application.
 
-::read-more{to="/docs/migration/overview"}
+::read-more{to="/docs/4.x/migration/overview"}
 Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
 ::
 
@@ -1203,6 +1185,6 @@ Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
 
 If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you can use Nuxt Bridge. Nuxt Bridge is a compatibility layer that allows you to use Nuxt 3+ features in Nuxt 2 with an opt-in mechanism.
 
-::read-more{to="/docs/bridge/overview"}
+::read-more{to="/docs/4.x/bridge/overview"}
 **Migrate from Nuxt 2 to Nuxt Bridge**
 ::

package/2.guide/0.index.md

@@ -7,19 +7,19 @@ surround: false
 ---
 
 ::card-group{class="sm:grid-cols-1"}
-  ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/guide/directory-structure"}
+  ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/4.x/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"}
+  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/4.x/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"}
+  ::card{icon="i-lucide-star" title="Going Further" to="/docs/4.x/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"}
+  ::card{icon="i-lucide-book-open" title="Recipes" to="/docs/4.x/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"}
+  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/4.x/guide/best-practices"}
   Learn about best practices when developing with Nuxt
   ::
 ::

package/2.guide/1.directory-structure/0.output.md

@@ -11,7 +11,7 @@ This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-
 
 Use this directory to deploy your Nuxt application to production.
 
-:read-more{to="/docs/getting-started/deployment"}
+:read-more{to="/docs/4.x/getting-started/deployment"}
 
 ::warning
 You should not touch any files inside since the whole directory will be re-created when running [`nuxt build`](/docs/4.x/api/commands/build).

package/2.guide/1.directory-structure/1.app/1.assets.md

@@ -13,4 +13,4 @@ The directory usually contains the following types of files:
 
 If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
 
-:read-more{to="/docs/getting-started/assets"}
+:read-more{to="/docs/4.x/getting-started/assets"}

package/2.guide/1.directory-structure/1.app/1.components.md

@@ -54,7 +54,7 @@ export default defineNuxtConfig({
       pathPrefix: false, // [!code ++]
     },
   ],
-});
+})
 ```
 
 This registers the components using the same strategy as used in Nuxt 2. For example, `~/components/Some/MyComponent.vue` will be usable as `<MyComponent>` and not `<SomeMyComponent>`.
@@ -116,7 +116,12 @@ const show = ref(false)
   <div>
     <h1>Mountains</h1>
     <LazyMountainsList v-if="show" />
-    <button v-if="!show" @click="show = true">Show List</button>
+    <button
+      v-if="!show"
+      @click="show = true"
+    >
+      Show List
+    </button>
   </div>
 </template>
 ```
@@ -235,9 +240,10 @@ Hydrates the component based on a boolean condition.
     <LazyMyComponent :hydrate-when="isReady" />
   </div>
 </template>
+
 <script setup lang="ts">
 const isReady = ref(false)
-function myFunction() {
+function myFunction () {
   // trigger custom hydration strategy...
   isReady.value = true
 }
@@ -263,13 +269,16 @@ All delayed hydration components emit a `@hydrated` event when they are hydrated
 ```vue [app/pages/index.vue]
 <template>
   <div>
-    <LazyMyComponent hydrate-on-visible @hydrated="onHydrate" />
+    <LazyMyComponent
+      hydrate-on-visible
+      @hydrated="onHydrate"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-function onHydrate() {
-  console.log("Component has been hydrated!")
+function onHydrate () {
+  console.log('Component has been hydrated!')
 }
 </script>
 ```
@@ -297,7 +306,7 @@ You can also explicitly import components from `#components` if you want or need
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
-import { NuxtLink, LazyMountainsList } from '#components'
+import { LazyMountainsList, NuxtLink } from '#components'
 
 const show = ref(false)
 </script>
@@ -306,7 +315,12 @@ const show = ref(false)
   <div>
     <h1>Mountains</h1>
     <LazyMountainsList v-if="show" />
-    <button v-if="!show" @click="show = true">Show List</button>
+    <button
+      v-if="!show"
+      @click="show = true"
+    >
+      Show List
+    </button>
     <NuxtLink to="/">Home</NuxtLink>
   </div>
 </template>
@@ -333,8 +347,8 @@ export default defineNuxtConfig({
     //
     // ~/components/Btn.vue => <Btn />
     // ~/components/base/Btn.vue => <BaseBtn />
-    '~/components'
-  ]
+    '~/components',
+  ],
 })
 ```
 
@@ -352,7 +366,7 @@ If you want to auto-import components from an npm package, you can use [`addComp
 import { addComponent, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
     addComponent({
       name: 'MyAutoImportedComponent',
@@ -385,8 +399,8 @@ export default defineNuxtConfig({
     {
       path: '~/components',
       extensions: ['.vue'], // [!code ++]
-    }
-  ]
+    },
+  ],
 })
 ```
 
@@ -416,7 +430,7 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
 `.client` components are rendered only after being mounted. To access the rendered template using `onMounted()`, add `await nextTick()` in the callback of the `onMounted()` hook.
 ::
 
-::read-more{to="/docs/api/components/client-only"}
+::read-more{to="/docs/4.x/api/components/client-only"}
 You can also achieve a similar result with the `<ClientOnly>` component.
 ::
 
@@ -424,7 +438,7 @@ You can also achieve a similar result with the `<ClientOnly>` component.
 
 Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.
 
-Server components can either be used on their own or paired with a [client component](/docs/guide/directory-structure/app/components#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/4.x/guide/directory-structure/app/components#paired-with-a-client-component).
 
 :video-accordion{title="Watch Learn Vue video about Nuxt Server Components" videoId="u1yyXe86xJM"}
 
@@ -443,8 +457,8 @@ Server components are currently experimental and in order to use them, you need
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    componentIslands: true
-  }
+    componentIslands: true,
+  },
 })
 ```
 
@@ -498,7 +512,10 @@ You can partially hydrate a component by setting a `nuxt-client` attribute on th
   <div>
     <HighlightedMarkdown markdown="# Headline" />
     <!-- Counter will be loaded and hydrated client-side -->
-    <Counter nuxt-client :count="5" />
+    <Counter
+      nuxt-client
+      :count="5"
+    />
   </div>
 </template>
 ```
@@ -547,7 +564,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
 
 There are a number of components that Nuxt provides, including `<ClientOnly>` and `<DevOnly>`. You can read more about them in the API documentation.
 
-::read-more{to="/docs/api"}
+::read-more{to="/docs/4.x/api"}
 ::
 
 ## Library Authors
@@ -573,10 +590,10 @@ Imagine a directory structure like this:
 Then in `awesome-ui/nuxt.ts` you can use the `addComponentsDir` hook:
 
 ```ts twoslash
-import { createResolver, defineNuxtModule, addComponentsDir } from '@nuxt/kit'
+import { addComponentsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const resolver = createResolver(import.meta.url)
 
     // Add ./components dir to the list
@@ -592,7 +609,7 @@ That's it! Now in your project, you can import your UI library as a Nuxt module
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: ['awesome-ui/nuxt']
+  modules: ['awesome-ui/nuxt'],
 })
 ```
 
@@ -609,4 +626,4 @@ export default defineNuxtConfig({
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}

package/2.guide/1.directory-structure/1.app/1.composables.md

@@ -9,7 +9,7 @@ navigation.icon: i-vscode-icons-folder-type-src
 
 **Method 1:** Using named export
 
-```js [app/composables/useFoo.ts]
+```ts [app/composables/useFoo.ts]
 export const useFoo = () => {
   return useState('foo', () => 'bar')
 }
@@ -17,7 +17,7 @@ export const useFoo = () => {
 
 **Method 2:** Using default export
 
-```js [app/composables/use-foo.ts or composables/useFoo.ts]
+```ts [app/composables/use-foo.ts or composables/useFoo.ts]
 // It will be available as useFoo() (camelCase of file name without extension)
 export default function () {
   return useState('foo', () => 'bar')
@@ -42,9 +42,9 @@ const foo = useFoo()
 The `app/composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `app/composables/` directory. You are free to employ reactivity features wherever they're needed in your application.
 ::
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ## Types
 
@@ -62,7 +62,7 @@ If you create a composable without having the dev server running, TypeScript wil
 
 You can use a composable within another composable using auto imports:
 
-```js [app/composables/test.ts]
+```ts [app/composables/test.ts]
 export const useFoo = () => {
   const nuxtApp = useNuxtApp()
   const bar = useBar()
@@ -73,7 +73,7 @@ export const useFoo = () => {
 
 You can access [plugin injections](/docs/4.x/guide/directory-structure/plugins#providing-helpers) from composables:
 
-```js [app/composables/test.ts]
+```ts [app/composables/test.ts]
 export const useHello = () => {
   const nuxtApp = useNuxtApp()
   return nuxtApp.$hello
@@ -114,8 +114,8 @@ export default defineNuxtConfig({
       // ... or scan composables nested one level deep with a specific name and file extension
       '~/composables/*/index.{ts,js,mjs,mts}',
       // ... or scan all composables within given directory
-      '~/composables/**'
-    ]
-  }
+      '~/composables/**',
+    ],
+  },
 })
 ```

package/2.guide/1.directory-structure/1.app/1.layouts.md

@@ -69,12 +69,12 @@ Then you can use the `custom` layout in your page:
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'custom'
+  layout: 'custom',
 })
 </script>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/pages#page-metadata"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/pages#page-metadata"}
 Learn more about `definePageMeta`.
 ::
 
@@ -83,7 +83,7 @@ You can directly override the default layout for all pages using the `name` prop
 ```vue [app/app.vue]
 <script setup lang="ts">
 // You might choose this based on an API call or logged-in status
-const layout = "custom";
+const layout = 'custom'
 </script>
 
 <template>
@@ -109,7 +109,7 @@ File | Layout Name
 `~/layouts/desktop-base/DesktopBase.vue` | `desktop-base`
 `~/layouts/desktop/Desktop.vue` | `desktop`
 
-:link-example{to="/docs/examples/features/layouts"}
+:link-example{to="/docs/4.x/examples/features/layouts"}
 
 ## Changing the Layout Dynamically
 
@@ -122,17 +122,19 @@ function enableCustomLayout () {
 }
 definePageMeta({
   layout: false,
-});
+})
 </script>
 
 <template>
   <div>
-    <button @click="enableCustomLayout">Update layout</button>
+    <button @click="enableCustomLayout">
+      Update layout
+    </button>
   </div>
 </template>
 ```
 
-:link-example{to="/docs/examples/features/layouts"}
+:link-example{to="/docs/4.x/examples/features/layouts"}
 
 ## Overriding a Layout on a Per-page Basis
 
@@ -150,7 +152,9 @@ definePageMeta({
 <template>
   <div>
     <NuxtLayout name="custom">
-      <template #header> Some header template content. </template>
+      <template #header>
+        Some header template content.
+      </template>
 
       The rest of the page
     </NuxtLayout>