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

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

@@ -20,10 +20,10 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 ## 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,7 +13,7 @@ links:
 ```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
 })
 </script>
 ```
@@ -22,11 +22,11 @@ definePageMeta({
 
 ## 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
@@ -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

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

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

@@ -35,8 +35,8 @@ await navigateTo({
   path: '/search',
   query: {
     page: 1,
-    sort: 'asc'
-  }
+    sort: 'asc',
+  },
 })
 </script>
 ```
@@ -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/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')
 }
 
@@ -41,6 +41,6 @@ You can enable experimental `cookieStore` option to automatically refresh `useCo
 
 ## Type
 
-```ts
-refreshCookie(name: string): void
+```ts [Signature]
+export function refreshCookie (name: string): void
 ```

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

@@ -16,8 +16,8 @@ If your component is cached by `<KeepAlive>` and enters a deactivated state, the
 
 ## Type
 
-```ts
-refreshNuxtData(keys?: string | string[])
+```ts [Signature]
+export function refreshNuxtData (keys?: string | string[])
 ```
 
 ## Parameters
@@ -50,7 +50,10 @@ async function refreshAll () {
 
 <template>
   <div>
-    <button :disabled="refreshing" @click="refreshAll">
+    <button
+      :disabled="refreshing"
+      @click="refreshAll"
+    >
       Refetch All Data
     </button>
   </div>
@@ -80,7 +83,9 @@ async function refresh () {
   <div v-if="refreshing">
     Loading
   </div>
-  <button @click="refresh">Refresh</button>
+  <button @click="refresh">
+    Refresh
+  </button>
 </template>
 ```
 

package/3.api/3.utils/reload-nuxt-app.md

@@ -20,8 +20,8 @@ You can enable experimental restoration of this state by enabling the `experimen
 
 ## Type
 
-```ts
-reloadNuxtApp(options?: ReloadNuxtAppOptions)
+```ts [Signature]
+export function reloadNuxtApp (options?: ReloadNuxtAppOptions)
 
 interface ReloadNuxtAppOptions {
   ttl?: number

package/3.api/3.utils/set-response-status.md

@@ -16,7 +16,7 @@ Nuxt provides composables and utilities for first-class server-side-rendering su
 `setResponseStatus` can only be called in the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context).
 ::
 
-```js
+```ts
 const event = useRequestEvent()
 
 // event will be undefined in the browser

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

@@ -15,10 +15,10 @@ Within the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-contex
 - `error`: `string | Error | Partial<{ cause, data, message, name, stack, statusCode, statusMessage }>`
 
 ```ts
-showError("😱 Oh no, an error has been thrown.")
+showError('😱 Oh no, an error has been thrown.')
 showError({
   statusCode: 404,
-  statusMessage: "Page Not Found"
+  statusMessage: 'Page Not Found',
 })
 ```
 

package/3.api/3.utils/update-app-config.md

@@ -15,10 +15,11 @@ Updates the [`app.config`](/docs/4.x/guide/directory-structure/app-config) using
 ## Usage
 
 ```js
+import { updateAppConfig, useAppConfig } from '#imports'
+
 const appConfig = useAppConfig() // { foo: 'bar' }
 
 const newAppConfig = { foo: 'baz' }
-
 updateAppConfig(newAppConfig)
 
 console.log(appConfig) // { foo: 'baz' }

package/3.api/4.commands/prepare.md

@@ -34,3 +34,7 @@ Option | Default | Description
 `--logLevel=<silent\|info\|verbose>` |  | Specify build-time log level
 `--envName` |  | The environment to use when resolving configuration overrides (default is `production` when building, and `development` when running the dev server)
 <!--/prepare-opts-->
+
+::note
+This command sets `process.env.NODE_ENV` to `production`.
+::

package/3.api/5.kit/1.modules.md

@@ -22,16 +22,16 @@ import { defineNuxtModule } from '@nuxt/kit'
 export default defineNuxtModule({
   meta: {
     name: 'my-module',
-    configKey: 'myModule'
+    configKey: 'myModule',
   },
   defaults: {
-    enabled: true
+    enabled: true,
   },
   setup (options) {
     if (options.enabled) {
       console.log('My Nuxt module is enabled!')
     }
-  }
+  },
 })
 ```
 
@@ -78,17 +78,17 @@ import { defineNuxtModule } from '@nuxt/kit'
 export default defineNuxtModule({
   meta: {
     name: 'my-module',
-    configKey: 'myModule'
+    configKey: 'myModule',
   },
   defaults: {
     // Module options
-    enabled: true
+    enabled: true,
   },
   setup (options) {
     if (options.enabled) {
       console.log('My Nuxt module is enabled!')
     }
-  }
+  },
 })
 ```
 
@@ -97,8 +97,8 @@ Users can provide options for this module under the corresponding key in `nuxt.c
 ```ts
 export default defineNuxtConfig({
   myModule: {
-    enabled: false
-  }
+    enabled: false,
+  },
 })
 ```
 
@@ -116,7 +116,7 @@ export default defineNuxtModule({
       nuxt: '>=3.0.0', // or use '^3.0.0'
     },
   },
-  async setup() {
+  setup () {
     const resolver = createResolver(import.meta.url)
     // Implement
   },
@@ -148,26 +148,26 @@ interface ModuleOptions {
 export default defineNuxtModule<ModuleOptions>().with({
   meta: {
     name: '@nuxtjs/my-api',
-    configKey: 'myApi'
+    configKey: 'myApi',
   },
   defaults: {
     baseURL: 'https://api.example.com',
     timeout: 5000,
-    retries: 3
+    retries: 3,
   },
-  setup(resolvedOptions, nuxt) {
+  setup (resolvedOptions, nuxt) {
     // resolvedOptions is properly typed as:
     // {
     //   apiKey: string          // Required, no default provided
     //   baseURL: string         // Required, has default value
     //   timeout: number         // Optional, has default value
-    //   retries: number         // Optional, has default value  
+    //   retries: number         // Optional, has default value
     // }
-    
+
     console.log(resolvedOptions.baseURL) // ✅ TypeScript knows this is always defined
     console.log(resolvedOptions.timeout) // ✅ TypeScript knows this is always defined
     console.log(resolvedOptions.retries) // ✅ TypeScript knows this is always defined
-  }
+  },
 })
 ```
 
@@ -197,45 +197,45 @@ export default defineNuxtModule({
   meta: {
     name: 'my-awesome-module',
     version: '1.2.0', // Required for lifecycle hooks
-    configKey: 'myAwesomeModule'
+    configKey: 'myAwesomeModule',
   },
   defaults: {
     apiKey: '',
-    enabled: true
+    enabled: true,
   },
-  
-  onInstall(nuxt) {
+
+  onInstall (nuxt) {
     // This runs only when the module is first installed
     console.log('Setting up my-awesome-module for the first time!')
-    
+
     // You might want to:
     // - Create initial configuration files
     // - Set up database schemas
     // - Display welcome messages
     // - Perform initial data migration
   },
-  
-  onUpgrade(options, nuxt, previousVersion) {
+
+  onUpgrade (options, nuxt, previousVersion) {
     // This runs when the module is upgraded to a newer version
     console.log(`Upgrading my-awesome-module from ${previousVersion} to 1.2.0`)
-    
+
     // You might want to:
     // - Migrate configuration files
-    // - Update database schemas  
+    // - Update database schemas
     // - Clean up deprecated files
     // - Display upgrade notes
-    
+
     if (semver.lt(previousVersion, '1.1.0')) {
       console.log('⚠️  Breaking changes in 1.1.0 - please check the migration guide')
     }
   },
-  
-  setup(options, nuxt) {
+
+  setup (options, nuxt) {
     // Regular setup logic runs on every build
     if (options.enabled) {
       // Configure the module
     }
-  }
+  },
 })
 ```
 
@@ -248,7 +248,7 @@ Install specified Nuxt module programmatically. This is helpful when your module
 ```ts twoslash
 import { defineNuxtModule, installModule } from '@nuxt/kit'
 
-export default defineNuxtModule({  
+export default defineNuxtModule({
   async setup () {
     // will install @nuxtjs/fontaine with Roboto font and Impact fallback
     await installModule('@nuxtjs/fontaine', {
@@ -258,10 +258,10 @@ export default defineNuxtModule({
           family: 'Roboto',
           fallbacks: ['Impact'],
           fallbackName: 'fallback-a',
-        }
-      ]
+        },
+      ],
     })
-  }
+  },
 })
 ```
 
@@ -284,7 +284,7 @@ async function installModule (moduleToInstall: string | NuxtModule, inlineOption
 ```ts
 import { defineNuxtModule, installModule } from '@nuxt/kit'
 
-export default defineNuxtModule({  
+export default defineNuxtModule({
   async setup (options, nuxt) {
     // will install @nuxtjs/fontaine with Roboto font and Impact fallback
     await installModule('@nuxtjs/fontaine', {
@@ -294,9 +294,9 @@ export default defineNuxtModule({
           family: 'Roboto',
           fallbacks: ['Impact'],
           fallbackName: 'fallback-a',
-        }
-      ]
+        },
+      ],
     })
-  }
+  },
 })
 ```

package/3.api/5.kit/10.templates.md

@@ -21,17 +21,17 @@ import { addTemplate, defineNuxtModule } from '@nuxt/kit'
 import { defu } from 'defu'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const globalMeta = defu(nuxt.options.app.head, {
       charset: options.charset,
-      viewport: options.viewport
+      viewport: options.viewport,
     })
 
     addTemplate({
       filename: 'meta.config.mjs',
-      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: 'setup' })
+      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: 'setup' }),
     })
-  }
+  },
 })
 ```
 
@@ -88,7 +88,7 @@ In the module above, we generate a virtual file named `meta.config.mjs`. In the
 import { createHead as createServerHead } from '@unhead/vue/server'
 import { createHead as createClientHead } from '@unhead/vue/client'
 import { defineNuxtPlugin } from '#imports'
-// @ts-ignore
+// @ts-expect-error - virtual file
 import metaConfig from '#build/meta.config.mjs'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -279,7 +279,9 @@ export default defineNuxtModule({
     ]
     // watch and rebuild routes template list when one of the pages changes
     nuxt.hook('builder:watch', async (event, relativePath) => {
-      if (event === 'change') { return }
+      if (event === 'change') {
+        return
+      }
 
       const path = resolve(nuxt.options.srcDir, relativePath)
       if (updateTemplatePaths.some(dir => path.startsWith(dir))) {