@nuxt/docs-nightly 4.1.3-29314777.50febbbb → 4.1.3-29316225.304409da

package/3.api/2.composables/use-loading-indicator.md

@@ -58,20 +58,20 @@ Used by `finish()`. Clear all timers and intervals used by the composable.
 
 ```vue
 <script setup lang="ts">
-  const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
-    duration: 2000,
-    throttle: 200,
-    // This is how progress is calculated by default
-    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
-  })
+const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
+  duration: 2000,
+  throttle: 200,
+  // This is how progress is calculated by default
+  estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50),
+})
 </script>
 ```
 
 ```vue
 <script setup lang="ts">
-  const { start, set } = useLoadingIndicator()
-  // same as set(0, { force: true })
-  // set the progress to 0, and show loading immediately
-  start({ force: true })
+const { start, set } = useLoadingIndicator()
+// same as set(0, { force: true })
+// set the progress to 0, and show loading immediately
+start({ force: true })
 </script>
 ```

package/3.api/2.composables/use-nuxt-app.md

@@ -34,9 +34,9 @@ By default, the shared runtime context of Nuxt is namespaced under the [`buildId
 
 `provide` function accepts `name` and `value` parameters.
 
-```js
+```ts
 const nuxtApp = useNuxtApp()
-nuxtApp.provide('hello', (name) => `Hello ${name}!`)
+nuxtApp.provide('hello', name => `Hello ${name}!`)
 
 // Prints "Hello name!"
 console.log(nuxtApp.$hello('name'))
@@ -112,7 +112,7 @@ Nuxt exposes the following properties through `ssrContext`:
   </script>
   ```
   ```ts [server/api/count.ts]
-  export default defineEventHandler(event => {
+  export default defineEventHandler((event) => {
     return { count: 1 }
   })
   ```
@@ -173,7 +173,7 @@ export default defineComponent({
         // ...
       }
     })
-  }
+  },
 })
 ```
 
@@ -204,7 +204,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
 #### Usage
 
-```js
+```ts
 const result = nuxtApp.runWithContext(() => functionWithContext())
 ```
 
@@ -218,14 +218,14 @@ Vue.js Composition API (and Nuxt composables similarly) work by depending on an
 
 What it does mean? The Composition API and Nuxt Composables are only available during lifecycle and in same tick before any async operation:
 
-```js
+```ts
 // --- Vue internal ---
 const _vueInstance = null
 const getCurrentInstance = () => _vueInstance
 // ---
 
 // Vue / Nuxt sets a global variable referencing to current component in _vueInstance when calling setup()
-async function setup() {
+async function setup () {
   getCurrentInstance() // Works
   await someAsyncOperation() // Vue unsets the context in same tick before async operation!
   getCurrentInstance() // null
@@ -236,7 +236,7 @@ The classic solution to this, is caching the current instance on first call to a
 
 To overcome this limitation, Vue does some behind the scenes work when compiling our application code and restores context after each call for `<script setup>`:
 
-```js
+```ts
 const __instance = getCurrentInstance() // Generated by Vue compiler
 getCurrentInstance() // Works!
 await someAsyncOperation() // Vue unsets the context
@@ -279,7 +279,7 @@ You can use it for composables that do not require `nuxtApp`, or to simply check
 Example usage:
 
 ```ts [composable.ts]
-export function useStandType() {
+export function useStandType () {
   // Always works on the client
   if (tryUseNuxtApp()) {
     return useRuntimeConfig().public.STAND_TYPE

package/3.api/2.composables/use-nuxt-data.md

@@ -50,10 +50,10 @@ const route = useRoute()
 
 const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
   key: `post-${route.params.id}`,
-  default() {
+  default () {
     // Find the individual post from the cache and set it as the default value.
     return posts.value.find(post => post.id === route.params.id)
-  }
+  },
 })
 </script>
 ```
@@ -80,10 +80,10 @@ let previousTodos = []
 const { data: todos } = useNuxtData('todos')
 
 async function addTodo () {
-  return $fetch('/api/addTodo', {
+  await $fetch('/api/addTodo', {
     method: 'post',
     body: {
-      todo: newTodo.value
+      todo: newTodo.value,
     },
     onRequest () {
       // Store the previously cached value to restore if fetch fails.
@@ -99,7 +99,7 @@ async function addTodo () {
     async onResponse () {
       // Invalidate todos in the background if the request succeeded.
       await refreshNuxtData('todos')
-    }
+    },
   })
 }
 </script>
@@ -107,6 +107,6 @@ async function addTodo () {
 
 ## Type
 
-```ts
-useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }
+```ts [Signature]
+export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }
 ```

package/3.api/2.composables/use-preview-mode.md

@@ -14,7 +14,7 @@ Preview mode allows you to see how your changes would be displayed on a live sit
 
 You can use the built-in `usePreviewMode` composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for [`useAsyncData`](/docs/4.x/api/composables/use-async-data) and [`useFetch`](/docs/4.x/api/composables/use-fetch) to rerender preview content.
 
-```js
+```ts
 const { enabled, state } = usePreviewMode()
 ```
 
@@ -24,13 +24,14 @@ const { enabled, state } = usePreviewMode()
 
 You can specify a custom way to enable preview mode. By default the `usePreviewMode` composable will enable preview mode if there is a `preview` param in url that is equal to `true` (for example, `http://localhost:3000?preview=true`). You can wrap the `usePreviewMode` into custom composable, to keep options consistent across usages and prevent any errors.
 
-```js
+```ts
 export function useMyPreviewMode () {
+  const route = useRoute()
   return usePreviewMode({
     shouldEnable: () => {
       return !!route.query.customPreview
-    }
-  });
+    },
+  })
 }
 ```
 
@@ -38,13 +39,13 @@ export function useMyPreviewMode () {
 
 `usePreviewMode` will try to store the value of a `token` param from url in state. You can modify this state and it will be available for all [`usePreviewMode`](/docs/4.x/api/composables/use-preview-mode) calls.
 
-```js
+```ts
 const data1 = ref('data1')
 
 const { enabled, state } = usePreviewMode({
   getState: (currentState) => {
     return { data1, data2: 'data2' }
-  }
+  },
 })
 ```
 
@@ -60,14 +61,14 @@ When preview mode is disabled, the composable will attach a callback to call `re
 
 You can specify custom callbacks to be triggered by providing your own functions for the `onEnable` and `onDisable` options.
 
-```js
+```ts
 const { enabled, state } = usePreviewMode({
   onEnable: () => {
     console.log('preview mode has been enabled')
   },
   onDisable: () => {
     console.log('preview mode has been disabled')
-  }
+  },
 })
 ```
 
@@ -81,8 +82,8 @@ const { enabled, state } = usePreviewMode()
 
 const { data } = await useFetch('/api/preview', {
   query: {
-    apiKey: state.token
-  }
+    apiKey: state.token,
+  },
 })
 </script>
 
@@ -107,11 +108,7 @@ npx nuxt generate
 npx nuxt preview
 ```
 
-Then you can see your preview page by adding the query param `preview` to the end of the page you want to see once:
-
-```js
-?preview=true
-```
+Then you can see your preview page by adding the query param `preview` to the end of the page you want to see once, for example `http://localhost:3000/?preview=true`.
 
 ::note
 `usePreviewMode` should be tested locally with `nuxt generate` and then `nuxt preview` rather than `nuxt dev`. (The [preview command](/docs/4.x/api/commands/preview) is not related to preview mode.)

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

@@ -33,7 +33,7 @@ const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'
 
 // This will NOT forward anything
 // Result: { cookies: {} }
-const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies')) 
+const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies'))
 </script>
 ```
 

package/3.api/2.composables/use-request-headers.md

@@ -10,12 +10,12 @@ links:
 
 You can use built-in [`useRequestHeaders`](/docs/4.x/api/composables/use-request-headers) composable to access the incoming request headers within your pages, components, and plugins.
 
-```js
+```ts
 // Get all request headers
 const headers = useRequestHeaders()
 
 // Get only cookie request header
-const headers = useRequestHeaders(['cookie'])
+const { cookie } = useRequestHeaders(['cookie'])
 ```
 
 ::tip
@@ -31,7 +31,7 @@ The example below adds the `authorization` request header to an isomorphic `$fet
 ```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 const { data } = await useFetch('/api/confidential', {
-  headers: useRequestHeaders(['authorization'])
+  headers: useRequestHeaders(['authorization']),
 })
 </script>
 ```

package/3.api/2.composables/use-response-header.md

@@ -16,8 +16,8 @@ You can use the built-in [`useResponseHeader`](/docs/4.x/api/composables/use-res
 
 ```ts
 // Set a custom response header
-const header = useResponseHeader('X-My-Header');
-header.value = 'my-value';
+const header = useResponseHeader('X-My-Header')
+header.value = 'my-value'
 ```
 
 ## Example
@@ -27,8 +27,8 @@ We can use `useResponseHeader` to easily set a response header on a per-page bas
 ```vue [app/pages/test.vue]
 <script setup>
 // pages/test.vue
-const header = useResponseHeader('X-My-Header');
-header.value = 'my-value';
+const header = useResponseHeader('X-My-Header')
+header.value = 'my-value'
 </script>
 
 <template>
@@ -41,8 +41,7 @@ We can use `useResponseHeader` for example in Nuxt [middleware](/docs/4.x/guide/
 
 ```ts [app/middleware/my-header-middleware.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
-  const header = useResponseHeader('X-My-Always-Header');
-  header.value = `I'm Always here!`;
-});
-
+  const header = useResponseHeader('X-My-Always-Header')
+  header.value = `I'm Always here!`
+})
 ```

package/3.api/2.composables/use-route-announcer.md

@@ -53,8 +53,8 @@ Sets the message with `politeness = "assertive"`
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
-  const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
-    politeness: 'assertive'
-  })
+const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
+  politeness: 'assertive',
+})
 </script>
 ```

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

@@ -18,7 +18,9 @@ If you only need the router instance within your template, use `$router`:
 
 ```vue [app/pages/index.vue]
 <template>
-  <button @click="$router.back()">Back</button>
+  <button @click="$router.back()">
+    Back
+  </button>
 </template>
 ```
 
@@ -64,8 +66,8 @@ const router = useRouter()
 router.back()
 router.forward()
 router.go(3)
-router.push({ path: "/home" })
-router.replace({ hash: "#bio" })
+router.push({ path: '/home' })
+router.replace({ hash: '#bio' })
 ```
 
 ::read-more{icon="i-simple-icons-mdnwebdocs" to="https://developer.mozilla.org/en-US/docs/Web/API/History" target="_blank"}

package/3.api/2.composables/use-runtime-config.md

@@ -38,9 +38,9 @@ export default defineNuxtConfig({
 
     // Public keys that are exposed to the client
     public: {
-      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
-    }
-  }
+      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api',
+    },
+  },
 })
 ```
 
@@ -63,11 +63,11 @@ export default defineEventHandler(async (event) => {
     baseURL: config.public.apiBase,
     headers: {
       // Access a private variable (only available on the server)
-      Authorization: `Bearer ${config.apiSecret}`
-    }
+      Authorization: `Bearer ${config.apiSecret}`,
+    },
   })
   return result
-}
+})
 ```
 
 In this example, since `apiBase` is defined within the `public` namespace, it is universally accessible on both server and client-side, while `apiSecret` **is only accessible on the server-side**.

package/3.api/2.composables/use-runtime-hook.md

@@ -13,7 +13,7 @@ This composable is available in Nuxt v3.14+.
 ::
 
 ```ts [signature]
-function useRuntimeHook<THookName extends keyof RuntimeNuxtHooks>(
+function useRuntimeHook<THookName extends keyof RuntimeNuxtHooks> (
   name: THookName,
   fn: RuntimeNuxtHooks[THookName] extends HookCallback ? RuntimeNuxtHooks[THookName] : never
 ): void

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

@@ -39,7 +39,7 @@ const title = ref('My title')
 
 useSeoMeta({
   title,
-  description: () => `This is a description for the ${title.value} page`
+  description: () => `This is a description for the ${title.value} page`,
 })
 </script>
 ```

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

@@ -17,7 +17,7 @@ In most instances, the meta doesn't need to be reactive as robots will only scan
 ```vue [app/app.vue]
 <script setup lang="ts">
 useServerSeoMeta({
-  robots: 'index, follow'
+  robots: 'index, follow',
 })
 </script>
 ```

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

@@ -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

@@ -41,16 +41,18 @@ 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

@@ -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()
 

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,7 +45,7 @@ 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',
   })
 })
 ```

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',
     }
   },
 })