@nuxt/docs 3.20.0 → 3.20.2

package/5.community/6.roadmap.md

@@ -38,12 +38,12 @@ Translations | -             | [nuxt/translations#4](https://github.com/nuxt/tra
 
 In addition to the Nuxt framework, there are modules that are vital for the ecosystem. Their status will be updated below.
 
-Module                              | Status              | Nuxt Support | Repository | Description
-------------------------------------|---------------------|--------------|------------|-------------------
-[Scripts](https://scripts.nuxt.com) | Public Beta         | 3.x, 4.x     | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management.
-Auth Utils                          | Planned             | 4.x, 5.x     | `nuxt/auth-utils` to be announced | The temporary repository [atinux/nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) is available while awaiting its official integration into Nuxt via RFC.
-A11y                                | Planned             | 4.x, 5.x     | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
-Hints                               | Planned             | 4.x, 5.x     | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices.
+Module                                 | Status              | Nuxt Support | Repository | Description
+---------------------------------------|---------------------|--------------|------------|-------------------
+[Scripts](https://scripts.nuxt.com)    | Public Beta         | 3.x, 4.x     | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management.
+Auth Utils                             | Planned             | 4.x, 5.x     | `nuxt/auth-utils` to be announced | The temporary repository [atinux/nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) is available while awaiting its official integration into Nuxt via RFC.
+A11y                                   | Planned             | 4.x, 5.x     | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
+[Hints](https://github.com/nuxt/hints) | Public Alpha        | 4.x, 5.x     | [nuxt/hints](https://github.com/nuxt/hints) | Guidance and suggestions for enhancing development practices.
 
 ## Release Cycle
 

package/5.community/7.changelog.md

@@ -58,6 +58,16 @@ navigation.icon: i-lucide-bell-dot
   ::card
   ---
   icon: i-simple-icons-github
+  title: nuxt/hints
+  to: https://github.com/nuxt/hints/releases
+  target: _blank
+  ui.icon.base: text-black dark:text-white
+  ---
+  Nuxt Hints releases.
+  ::
+  ::card
+  ---
+  icon: i-simple-icons-github
   title: nuxt/image
   to: https://github.com/nuxt/image/releases
   target: _blank

package/6.bridge/1.overview.md

@@ -80,7 +80,7 @@ bun add -D @nuxt/bridge nuxi
 
 Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
 
-You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) is also possible and recommended.
+You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) is also possible and recommended.
 
 ```ts [nuxt.config.ts]
 import { defineNuxtConfig } from '@nuxt/bridge'

package/6.bridge/4.plugins-and-middleware.md

@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt Bridge new plugins and mi
 
 You can now migrate to the Nuxt 3 plugins API, which is slightly different in format from Nuxt 2.
 
-Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/3.x/guide/directory-structure/plugins).
+Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/3.x/directory-structure/plugins).
 
 ```ts [plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -28,7 +28,7 @@ Although a compatibility interface is provided via `nuxtApp.vueApp` you should a
 
 You can now migrate to the Nuxt 3 middleware API, which is slightly different in format from Nuxt 2.
 
-Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/3.x/guide/directory-structure/middleware).
+Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/3.x/directory-structure/middleware).
 
 ```ts twoslash
 export default defineNuxtRouteMiddleware((to) => {

package/7.migration/2.configuration.md

@@ -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/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/6.pages-and-layouts.md

@@ -19,13 +19,13 @@ This file is a great place to put any custom code that needs to be run once when
 
 ### 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
 

package/package.json

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

package/3.api/2.composables/use-head.md

@@ -1,69 +0,0 @@
----
-title: useHead
-description: useHead customizes the head properties of individual pages of your Nuxt app.
-links:
-  - label: Source
-    icon: i-simple-icons-github
-    to: https://github.com/unjs/unhead/blob/main/packages/vue/src/composables.ts
-    size: xs
----
-
-The [`useHead`](/docs/3.x/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.unjs.io). If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/3.x/api/composables/use-head-safe).
-
-:read-more{to="/docs/getting-started/seo-meta"}
-
-## Type
-
-```ts [Signature]
-export function useHead (meta: MaybeComputedRef<MetaObject>): void
-```
-
-Below are the non-reactive types for [`useHead`](/docs/3.x/api/composables/use-head) .
-
-```ts
-interface MetaObject {
-  title?: string
-  titleTemplate?: string | ((title?: string) => string)
-  base?: Base
-  link?: Link[]
-  meta?: Meta[]
-  style?: Style[]
-  script?: Script[]
-  noscript?: Noscript[]
-  htmlAttrs?: HtmlAttributes
-  bodyAttrs?: BodyAttributes
-}
-```
-
-See [@unhead/vue](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/schema.ts) for more detailed types.
-
-::note
-The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
-::
-
-## Params
-
-### `meta`
-
-**Type**: `MetaObject`
-
-An object accepting the following head metadata:
-
-- `meta`: Each element in the array is mapped to a newly-created `<meta>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `link`: Each element in the array is mapped to a newly-created `<link>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `style`: Each element in the array is mapped to a newly-created `<style>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `script`: Each element in the array is mapped to a newly-created `<script>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `noscript`: Each element in the array is mapped to a newly-created `<noscript>` tag, where object properties are mapped to the corresponding attributes.
-  - **Type**: `Array<Record<string, any>>`
-- `titleTemplate`: Configures dynamic template to customize the page title on an individual page.
-  - **Type**: `string` | `((title: string) => string)`
-- `title`: Sets static page title on an individual page.
-  - **Type**: `string`
-- `bodyAttrs`: Sets attributes of the `<body>` tag. Each object property is mapped to the corresponding attribute.
-  - **Type**: `Record<string, any>`
-- `htmlAttrs`: Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute.
-  - **Type**: `Record<string, any>`

package/3.api/2.composables/use-lazy-async-data.md

@@ -1,47 +0,0 @@
----
-title: useLazyAsyncData
-description: This wrapper around useAsyncData triggers navigation immediately.
-links:
-  - label: Source
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/asyncData.ts
-    size: xs
----
-
-## Description
-
-By default, [`useAsyncData`](/docs/3.x/api/composables/use-async-data) blocks navigation until its async handler is resolved. `useLazyAsyncData` provides a wrapper around [`useAsyncData`](/docs/3.x/api/composables/use-async-data) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
-
-::note
-`useLazyAsyncData` has the same signature as [`useAsyncData`](/docs/3.x/api/composables/use-async-data).
-::
-
-:read-more{to="/docs/api/composables/use-async-data"}
-
-## Example
-
-```vue [pages/index.vue]
-<script setup lang="ts">
-/* Navigation will occur before fetching is complete.
-  Handle 'pending' and 'error' states directly within your component's template
-*/
-const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
-
-watch(count, (newCount) => {
-  // Because count might start out null, you won't have access
-  // to its contents immediately, but you can watch it.
-})
-</script>
-
-<template>
-  <div>
-    {{ status === 'pending' ? 'Loading' : count }}
-  </div>
-</template>
-```
-
-::warning
-`useLazyAsyncData` is a reserved function name transformed by the compiler, so you should not name your own function `useLazyAsyncData`.
-::
-
-:read-more{to="/docs/getting-started/data-fetching"}

package/3.api/2.composables/use-lazy-fetch.md

@@ -1,55 +0,0 @@
----
-title: 'useLazyFetch'
-description: This wrapper around useFetch triggers navigation immediately.
-links:
-  - label: Source
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/fetch.ts
-    size: xs
----
-
-## Description
-
-By default, [`useFetch`](/docs/3.x/api/composables/use-fetch) blocks navigation until its async handler is resolved. `useLazyFetch` provides a wrapper around [`useFetch`](/docs/3.x/api/composables/use-fetch) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
-
-::note
-`useLazyFetch` has the same signature as [`useFetch`](/docs/3.x/api/composables/use-fetch).
-::
-
-::note
-Awaiting `useLazyFetch` in this mode only ensures the call is initialized. On client-side navigation, data may not be immediately available, and you should make sure to handle the pending state in your app.
-::
-
-:read-more{to="/docs/api/composables/use-fetch"}
-
-## Example
-
-```vue [pages/index.vue]
-<script setup lang="ts">
-/* Navigation will occur before fetching is complete.
- * Handle 'pending' and 'error' states directly within your component's template
- */
-const { status, data: posts } = await useLazyFetch('/api/posts')
-watch(posts, (newPosts) => {
-  // Because posts might start out null, you won't have access
-  // to its contents immediately, but you can watch it.
-})
-</script>
-
-<template>
-  <div v-if="status === 'pending'">
-    Loading ...
-  </div>
-  <div v-else>
-    <div v-for="post in posts">
-      <!-- do something -->
-    </div>
-  </div>
-</template>
-```
-
-::note
-`useLazyFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useLazyFetch`.
-::
-
-:read-more{to="/docs/getting-started/data-fetching"}