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

package/3.api/2.composables/use-server-seo-meta.md

@@ -10,18 +10,18 @@ links:
 
 Just like [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta), `useServerSeoMeta` composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.
 
-:read-more{to="/docs/api/composables/use-seo-meta"}
+:read-more{to="/docs/4.x/api/composables/use-seo-meta"}
 
 In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using [`useServerSeoMeta`](/docs/4.x/api/composables/use-server-seo-meta) as a performance-focused utility that will not do anything (or return a `head` object) on the client.
 
 ```vue [app/app.vue]
 <script setup lang="ts">
 useServerSeoMeta({
-  robots: 'index, follow'
+  robots: 'index, follow',
 })
 </script>
 ```
 
 Parameters are exactly the same as with [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta)
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}

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

@@ -15,7 +15,7 @@ links:
 const count = useState('counter', () => Math.round(Math.random() * 100))
 ```
 
-:read-more{to="/docs/getting-started/state-management"}
+:read-more{to="/docs/4.x/getting-started/state-management"}
 
 ::important
 Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
@@ -38,9 +38,9 @@ const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactiv
 
 ## Type
 
-```ts
-useState<T>(init?: () => T | Ref<T>): Ref<T>
-useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
+```ts [Signature]
+export function useState<T> (init?: () => T | Ref<T>): Ref<T>
+export function useState<T> (key: string, init?: () => T | Ref<T>): Ref<T>
 ```
 
 - `key`: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of [`useState`](/docs/4.x/api/composables/use-state) will be generated for you.

package/3.api/3.utils/$fetch.md

@@ -35,22 +35,24 @@ const { data } = await useFetch('/api/item')
 </script>
 ```
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}
 
 You can use `$fetch` in any methods that are executed only on client-side.
 
 ```vue [app/pages/contact.vue]
 <script setup lang="ts">
-async function contactForm() {
+async function contactForm () {
   await $fetch('/api/contact', {
     method: 'POST',
-    body: { hello: 'world '}
+    body: { hello: 'world' },
   })
 }
 </script>
 
 <template>
-  <button @click="contactForm">Contact</button>
+  <button @click="contactForm">
+    Contact
+  </button>
 </template>
 ```
 

package/3.api/3.utils/abort-navigation.md

@@ -14,8 +14,8 @@ links:
 
 ## Type
 
-```ts
-abortNavigation(err?: Error | string): false
+```ts [Signature]
+export function abortNavigation (err?: Error | string): false
 ```
 
 ## Parameters

package/3.api/3.utils/add-route-middleware.md

@@ -80,9 +80,9 @@ Global route middleware can be defined in two ways:
   ```ts [app/plugins/my-plugin.ts]
   export default defineNuxtPlugin(() => {
     addRouteMiddleware('global-middleware', (to, from) => {
-        console.log('global middleware that runs on every route change')
-      },
-      { global: true }
+      console.log('global middleware that runs on every route change')
+    },
+    { global: true },
     )
   })
   ```

package/3.api/3.utils/call-once.md

@@ -54,11 +54,11 @@ await callOnce(async () => {
 `navigation` mode is available since [Nuxt v3.15](/blog/v3-15).
 ::
 
-::tip{to="/docs/getting-started/state-management#usage-with-pinia"}
+::tip{to="/docs/4.x/getting-started/state-management#usage-with-pinia"}
 `callOnce` is useful in combination with the [Pinia module](/modules/pinia) to call store actions.
 ::
 
-:read-more{to="/docs/getting-started/state-management"}
+:read-more{to="/docs/4.x/getting-started/state-management"}
 
 ::warning
 Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/docs/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) if you want to do data fetching during SSR.
@@ -70,9 +70,9 @@ Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/d
 
 ## Type
 
-```ts
-callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
-callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
+```ts [Signature]
+export function callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
+export function callOnce (fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
 
 type CallOnceOptions = {
   /**

package/3.api/3.utils/clear-error.md

@@ -16,7 +16,7 @@ Within your pages, components, and plugins, you can use `clearError` to clear al
 
 You can provide an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
 
-```js
+```ts
 // Without redirect
 clearError()
 
@@ -26,4 +26,4 @@ clearError({ redirect: '/homepage' })
 
 Errors are set in state using [`useError()`](/docs/4.x/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/3.utils/clear-nuxt-data.md

@@ -14,8 +14,8 @@ This method is useful if you want to invalidate the data fetching for another pa
 
 ## Type
 
-```ts
-clearNuxtData (keys?: string | string[] | ((key: string) => boolean)): void
+```ts [Signature]
+export function clearNuxtData (keys?: string | string[] | ((key: string) => boolean)): void
 ```
 
 ## Parameters

package/3.api/3.utils/clear-nuxt-state.md

@@ -14,8 +14,8 @@ This method is useful if you want to invalidate the state of `useState`.
 
 ## Type
 
-```ts
-clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void
+```ts [Signature]
+export function clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void
 ```
 
 ## Parameters

package/3.api/3.utils/create-error.md

@@ -45,11 +45,11 @@ Use `createError` to trigger error handling in server API routes.
 export default eventHandler(() => {
   throw createError({
     statusCode: 404,
-    statusMessage: 'Page Not Found'
+    statusMessage: 'Page Not Found',
   })
 })
 ```
 
 In API routes, using `createError` by passing an object with a short `statusMessage` is recommended because it can be accessed on the client side. Otherwise, a `message` passed to `createError` on an API route will not propagate to the client. Alternatively, you can use the `data` property to pass data back to the client. In any case, always consider avoiding to put dynamic user input to the message to avoid potential security issues.
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/3.utils/define-lazy-hydration-component.md

@@ -20,13 +20,13 @@ Hydrates the component when it becomes visible in the viewport.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'visible',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
 <template>
   <div>
-    <!-- 
+    <!--
       Hydration will be triggered when
       the element(s) is 100px away from entering the viewport.
     -->
@@ -53,7 +53,7 @@ Hydrates the component when the browser is idle. This is suitable if you need th
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'idle',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -81,7 +81,7 @@ Hydrates the component after a specified interaction (e.g., click, mouseover).
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'interaction',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -110,7 +110,7 @@ Hydrates the component when the window matches a media query.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'mediaQuery',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -136,8 +136,8 @@ Hydrates the component after a specified delay (in milliseconds).
 ```vue
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
-  'time', 
-  () => import('./components/MyComponent.vue')
+  'time',
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -159,12 +159,12 @@ Hydrates the component based on a boolean condition.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'if',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 
 const isReady = ref(false)
 
-function myFunction() {
+function myFunction () {
   // Trigger custom hydration strategy...
   isReady.value = true
 }
@@ -188,7 +188,7 @@ Never hydrates the component.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'never',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -208,11 +208,11 @@ All delayed hydration components emit a `@hydrated` event when they are hydrated
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'visible',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 
-function onHydrate() {
-  console.log("Component has been hydrated!")
+function onHydrate () {
+  console.log('Component has been hydrated!')
 }
 </script>
 

package/3.api/3.utils/define-nuxt-component.md

@@ -25,11 +25,11 @@ If you choose not to use `setup()` in your app, you can use the `asyncData()` me
 ```vue [app/pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
-  async asyncData() {
+  asyncData () {
     return {
       data: {
-        greetings: 'hello world!'
-      }
+        greetings: 'hello world!',
+      },
     }
   },
 })
@@ -43,9 +43,9 @@ If you choose not to use `setup()` in your app, you can use the `head()` method
 ```vue [app/pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
-  head(nuxtApp) {
+  head (nuxtApp) {
     return {
-      title: 'My site'
+      title: 'My site',
     }
   },
 })

package/3.api/3.utils/define-nuxt-plugin.md

@@ -16,14 +16,14 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/plugins#creating-plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/plugins#creating-plugins"}
 
 ## Type
 
-```ts
-defineNuxtPlugin<T extends Record<string, unknown>>(plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>
+```ts [Signature]
+export function defineNuxtPlugin<T extends Record<string, unknown>> (plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>
 
-type Plugin<T> = (nuxt: [NuxtApp](/docs/4.x/guide/going-further/internals#the-nuxtapp-interface)) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }
+type Plugin<T> = (nuxt: NuxtApp) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }
 
 interface ObjectPlugin<T> {
   name?: string
@@ -32,7 +32,7 @@ interface ObjectPlugin<T> {
   order?: number
   parallel?: boolean
   setup?: Plugin<T>
-  hooks?: Partial<[RuntimeNuxtHooks](/docs/4.x/api/advanced/hooks#app-hooks-runtime)>
+  hooks?: Partial<RuntimeNuxtHooks>
   env?: {
     islands?: boolean
   }
@@ -69,8 +69,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   // Add a global method
   return {
     provide: {
-      hello: (name: string) => `Hello ${name}!`
-    }
+      hello: (name: string) => `Hello ${name}!`,
+    },
   }
 })
 ```
@@ -86,17 +86,17 @@ export default defineNuxtPlugin({
   async setup (nuxtApp) {
     // Plugin setup logic
     const data = await $fetch('/api/config')
-    
+
     return {
       provide: {
-        config: data
-      }
+        config: data,
+      },
     }
   },
   hooks: {
-    'app:created'() {
+    'app:created' () {
       console.log('App created!')
-    }
+    },
   },
 })
 ```

package/3.api/3.utils/define-nuxt-route-middleware.md

@@ -12,8 +12,8 @@ Route middleware are stored in the [`app/middleware/`](/docs/4.x/guide/directory
 
 ## Type
 
-```ts
-defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware
+```ts [Signature]
+export function defineNuxtRouteMiddleware (middleware: RouteMiddleware): RouteMiddleware
 
 interface RouteMiddleware {
   (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>

package/3.api/3.utils/define-page-meta.md

@@ -13,20 +13,20 @@ links:
 ```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
 })
 </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"}
 
 ## Type
 
-```ts
-definePageMeta(meta: PageMeta) => void
+```ts [Signature]
+export function definePageMeta (meta: PageMeta): void
 
 interface PageMeta {
-  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
+  validate?: ((route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>)
   redirect?: RouteRecordRedirectOption
   name?: string
   path?: string
@@ -62,7 +62,7 @@ interface PageMeta {
 
   - **Type**: `string`
 
-    You may define a [custom regular expression](/docs/api/composables/use-nuxt-app#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.
+    You may define a [custom regular expression](/docs/4.x/api/composables/use-nuxt-app#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.
 
   **`props`**
   
@@ -157,13 +157,13 @@ The example below demonstrates:
 ```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: (route) => route.fullPath,
+  key: route => route.fullPath,
 
   keepalive: {
-    exclude: ['modal']
+    exclude: ['modal'],
   },
 
-  pageType: 'Checkout'
+  pageType: 'Checkout',
 })
 </script>
 ```
@@ -181,20 +181,20 @@ definePageMeta({
       const auth = useState('auth')
 
       if (!auth.value.authenticated) {
-          return navigateTo('/login')
+        return navigateTo('/login')
       }
 
       if (to.path !== '/checkout') {
         return navigateTo('/checkout')
       }
-    }
+    },
   ],
 
   // ... or a string
-  middleware: 'auth'
+  middleware: 'auth',
 
   // ... or multiple strings
-  middleware: ['auth', 'another-named-middleware']
+  middleware: ['auth', 'another-named-middleware'],
 })
 </script>
 ```
@@ -210,7 +210,7 @@ To make sure that we are only matching digits (`\d+`) for `postId` in the `[post
 ```vue [app/pages/[postId\\]-[postSlug\\].vue]
 <script setup lang="ts">
 definePageMeta({
-  path: '/:postId(\\d+)-:postSlug' 
+  path: '/:postId(\\d+)-:postSlug',
 })
 </script>
 ```
@@ -225,10 +225,10 @@ You can define the layout that matches the layout's file name located (by defaul
 <script setup lang="ts">
 definePageMeta({
   // set custom layout
-  layout: 'admin'
+  layout: 'admin',
 
   // ... or disable a default layout
-  layout: false
+  layout: false,
 })
 </script>
 ```

package/3.api/3.utils/define-route-rules.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-::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`.
 ::
 
@@ -17,7 +17,7 @@ This feature is experimental and in order to use it you must enable the `experim
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
 defineRouteRules({
-  prerender: true
+  prerender: true,
 })
 </script>
 
@@ -31,8 +31,8 @@ Will be translated to:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   routeRules: {
-    '/': { prerender: true }
-  }
+    '/': { prerender: true },
+  },
 })
 ```
 
@@ -47,6 +47,6 @@ When running [`nuxt build`](/docs/4.x/api/commands/build), the home page will be
 
 For more control, such as if you are using a custom `path` or `alias` set in the page's [`definePageMeta`](/docs/4.x/api/utils/define-page-meta), you should set `routeRules` directly within your `nuxt.config`.
 
-::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
+::read-more{to="/docs/4.x/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
 Read more about the `routeRules`.
 ::

package/3.api/3.utils/navigate-to.md

@@ -35,8 +35,8 @@ await navigateTo({
   path: '/search',
   query: {
     page: 1,
-    sort: 'asc'
-  }
+    sort: 'asc',
+  },
 })
 </script>
 ```
@@ -68,7 +68,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 In this case, `navigateTo` will be executed but not returned, which may lead to unexpected behavior.
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ### Navigating to an External URL
 
@@ -92,7 +92,7 @@ await navigateTo('https://nuxt.com')
 
 // will redirect successfully with the 'external' parameter set to 'true'
 await navigateTo('https://nuxt.com', {
-  external: true
+  external: true,
 })
 </script>
 ```
@@ -107,20 +107,20 @@ await navigateTo('https://nuxt.com', {
     target: '_blank',
     windowFeatures: {
       width: 500,
-      height: 500
-    }
-  }
+      height: 500,
+    },
+  },
 })
 </script>
 ```
 
 ## Type
 
-```ts
-function navigateTo(
+```ts [Signature]
+export function navigateTo (
   to: RouteLocationRaw | undefined | null,
   options?: NavigateToOptions
-) => Promise<void | NavigationFailure | false> | false | void | RouteLocationRaw 
+): Promise<void | NavigationFailure | false> | false | void | RouteLocationRaw
 
 interface NavigateToOptions {
   replace?: boolean

package/3.api/3.utils/preload-components.md

@@ -12,7 +12,7 @@ Preloading components loads components that your page will need very soon, which
 
 Use `preloadComponents` to manually preload individual components that have been registered globally in your Nuxt app. By default Nuxt registers these as async components. You must use the Pascal-cased version of the component name.
 
-```js
+```ts
 await preloadComponents('MyGlobalComponent')
 
 await preloadComponents(['MyGlobalComponent1', 'MyGlobalComponent2'])

package/3.api/3.utils/preload-route-components.md

@@ -14,7 +14,7 @@ Preloading routes loads the components of a given route that the user might navi
 Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component.
 ::
 
-:read-more{to="/docs/api/components/nuxt-link"}
+:read-more{to="/docs/4.x/api/components/nuxt-link"}
 
 ## Example
 
@@ -34,7 +34,7 @@ const submit = async () => {
 }
 ```
 
-:read-more{to="/docs/api/utils/navigate-to"}
+:read-more{to="/docs/4.x/api/utils/navigate-to"}
 
 ::note
 On server, `preloadRouteComponents` will have no effect.

package/3.api/3.utils/prerender-routes.md

@@ -18,7 +18,7 @@ When prerendering, you can hint to Nitro to prerender additional paths, even if
 `prerenderRoutes` has to be executed during prerendering. If the `prerenderRoutes` is used in dynamic pages/routes which are not prerendered, then it will not be executed.
 ::
 
-```js
+```ts
 const route = useRoute()
 
 prerenderRoutes('/')
@@ -31,7 +31,7 @@ In the browser, or if called outside prerendering, `prerenderRoutes` will have n
 
 You can even prerender API routes which is particularly useful for full statically generated sites (SSG) because you can then `$fetch` data as if you have an available server!
 
-```js
+```ts
 prerenderRoutes('/api/content/article/name-of-article')
 
 // Somewhere later in App

package/3.api/3.utils/refresh-cookie.md

@@ -27,7 +27,7 @@ This is useful for updating the `useCookie` ref when we know the new cookie valu
 const tokenCookie = useCookie('token')
 
 const login = async (username, password) => {
-  const token = await $fetch('/api/token', { ... }) // Sets `token` cookie on response
+  const token = await $fetch('/api/token', { /** ... */ }) // Sets `token` cookie on response
   refreshCookie('token')
 }
 
@@ -35,12 +35,12 @@ const loggedIn = computed(() => !!tokenCookie.value)
 </script>
 ```
 
-::note{to="/docs/guide/going-further/experimental-features#cookiestore"}
+::note{to="/docs/4.x/guide/going-further/experimental-features#cookiestore"}
 You can enable experimental `cookieStore` option to automatically refresh `useCookie` value when cookie changes in the browser.
 ::
 
 ## Type
 
-```ts
-refreshCookie(name: string): void
+```ts [Signature]
+export function refreshCookie (name: string): void
 ```