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

package/3.api/5.kit/11.nitro.md

@@ -17,17 +17,17 @@ Adds a Nitro server handler. Use this if you want to create server middleware or
 ### Usage
 
 ```ts twoslash
-import { createResolver, defineNuxtModule, addServerHandler } from '@nuxt/kit'
+import { addServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options) {
+  setup (options) {
     const { resolve } = createResolver(import.meta.url)
 
     addServerHandler({
       route: '/robots.txt',
-      handler: resolve('./runtime/robots.get')
+      handler: resolve('./runtime/robots.get'),
     })
-  }
+  },
 })
 ```
 
@@ -58,24 +58,24 @@ You can use `addServerHandler` to add a server handler from your module.
 ::code-group
 
 ```ts twoslash [module.ts]
-import { createResolver, defineNuxtModule, addServerHandler } from '@nuxt/kit'
+import { addServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options) {
+  setup (options) {
     const { resolve } = createResolver(import.meta.url)
 
     addServerHandler({
       route: '/robots.txt',
-      handler: resolve('./runtime/robots.get')
+      handler: resolve('./runtime/robots.get'),
     })
-  }
+  },
 })
 ```
 
 ```ts twoslash [runtime/robots.get.ts]
 export default defineEventHandler(() => {
   return {
-    body: `User-agent: *\nDisallow: /`
+    body: `User-agent: *\nDisallow: /`,
   }
 })
 ```
@@ -97,19 +97,19 @@ Adds a Nitro server handler to be used only in development mode. This handler wi
 
 ```ts twoslash
 import { defineEventHandler } from 'h3'
-import { createResolver, defineNuxtModule, addDevServerHandler } from '@nuxt/kit'
+import { addDevServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     addDevServerHandler({
       handler: defineEventHandler(() => {
         return {
-          body: `Response generated at ${new Date().toISOString()}`
+          body: `Response generated at ${new Date().toISOString()}`,
         }
       }),
-      route: '/_handler'
+      route: '/_handler',
     })
-  }
+  },
 })
 ```
 
@@ -139,18 +139,18 @@ In some cases, you may want to create a server handler specifically for developm
 
 ```ts
 import { joinURL } from 'ufo'
-import { defineNuxtModule, addDevServerHandler } from '@nuxt/kit'
+import { addDevServerHandler, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  async setup(options, nuxt) {
+  async setup (options, nuxt) {
     const route = joinURL(nuxt.options.app?.baseURL, '/_tailwind')
 
-    // @ts-ignore
+    // @ts-expect-error - tailwind-config-viewer does not have correct types
     const createServer = await import('tailwind-config-viewer/server/index.js').then(r => r.default || r) as any
     const viewerDevMiddleware = createServer({ tailwindConfigProvider: () => options, routerPrefix: route }).asMiddleware()
 
     addDevServerHandler({ route, handler: viewerDevMiddleware })
-  }
+  },
 })
 ```
 
@@ -172,14 +172,14 @@ Changes to the Nitro instance configuration are not applied.
 import { defineNuxtModule, useNitro } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     nuxt.hook('ready', () => {
       const nitro = useNitro()
       // Do something with Nitro instance
     })
-  }
+  },
 })
 ```
 
@@ -200,13 +200,13 @@ You can read more about Nitro plugins in the [Nitro documentation](https://nitro
 ### Usage
 
 ```ts twoslash
-import { createResolver, defineNuxtModule, addServerPlugin } from '@nuxt/kit'
+import { addServerPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const { resolve } = createResolver(import.meta.url)
     addServerPlugin(resolve('./runtime/plugin.ts'))
-  }
+  },
 })
 ```
 
@@ -227,30 +227,30 @@ function addServerPlugin (plugin: string): void
 ::code-group
 
 ```ts [module.ts]
-import { createResolver, defineNuxtModule, addServerPlugin } from '@nuxt/kit'
+import { addServerPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const { resolve } = createResolver(import.meta.url)
     addServerPlugin(resolve('./runtime/plugin.ts'))
-  }
+  },
 })
 ```
 
 ```ts [runtime/plugin.ts]
 export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook("request", (event) => {
-    console.log("on request", event.path);
-  });
-
-  nitroApp.hooks.hook("beforeResponse", (event, { body }) => {
-    console.log("on response", event.path, { body });
-  });
-
-  nitroApp.hooks.hook("afterResponse", (event, { body }) => {
-    console.log("on after response", event.path, { body });
-  });
-});
+  nitroApp.hooks.hook('request', (event) => {
+    console.log('on request', event.path)
+  })
+
+  nitroApp.hooks.hook('beforeResponse', (event, { body }) => {
+    console.log('on response', event.path, { body })
+  })
+
+  nitroApp.hooks.hook('afterResponse', (event, { body }) => {
+    console.log('on after response', event.path, { body })
+  })
+})
 ```
 
 ::
@@ -262,7 +262,7 @@ Add routes to be prerendered to Nitro.
 ### Usage
 
 ```ts
-import { defineNuxtModule, addPrerenderRoutes } from '@nuxt/kit'
+import { addPrerenderRoutes, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
@@ -273,11 +273,11 @@ export default defineNuxtModule({
     sitemapUrl: '/sitemap.xml',
     prerender: true,
   },
-  setup(options) {
+  setup (options) {
     if (options.prerender) {
       addPrerenderRoutes(options.sitemapUrl)
     }
-  }
+  },
 })
 ```
 
@@ -300,22 +300,22 @@ Add imports to the server. It makes your imports available in Nitro without the
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, createResolver, addServerImports } from '@nuxt/kit'
+import { addServerImports, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options) {
+  setup (options) {
     const names = [
       'useStoryblok',
       'useStoryblokApi',
       'useStoryblokBridge',
       'renderRichText',
-      'RichTextSchema'
+      'RichTextSchema',
     ]
 
-    names.forEach((name) =>
-      addServerImports({ name, as: name, from: '@storyblok/vue' })
+    names.forEach(name =>
+      addServerImports({ name, as: name, from: '@storyblok/vue' }),
     )
-  }
+  },
 })
 ```
 
@@ -347,17 +347,17 @@ Add a directory to be scanned for auto-imports by Nitro.
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, createResolver, addServerImportsDir } from '@nuxt/kit'
+import { addServerImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: 'my-module',
     configKey: 'myModule',
   },
-  setup(options) {
+  setup (options) {
     const { resolve } = createResolver(import.meta.url)
     addServerImportsDir(resolve('./runtime/server/composables'))
-  }
+  },
 })
 ```
 
@@ -381,22 +381,22 @@ You can use `addServerImportsDir` to add a directory to be scanned by Nitro. Thi
 ::code-group
 
 ```ts twoslash [module.ts]
-import { defineNuxtModule, createResolver, addServerImportsDir } from '@nuxt/kit'
+import { addServerImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: 'my-module',
     configKey: 'myModule',
   },
-  setup(options) {
+  setup (options) {
     const { resolve } = createResolver(import.meta.url)
     addServerImportsDir(resolve('./runtime/server/composables'))
-  }
+  },
 })
 ```
 
 ```ts twoslash [runtime/server/composables/index.ts]
-export function useApiSecret() {
+export function useApiSecret () {
   const { apiSecret } = useRuntimeConfig()
   return apiSecret
 }
@@ -427,17 +427,17 @@ Only `~/server/api`, `~/server/routes`, `~/server/middleware`, and `~/server/uti
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, createResolver, addServerScanDir } from '@nuxt/kit'
+import { addServerScanDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: 'my-module',
     configKey: 'myModule',
   },
-  setup(options) {
+  setup (options) {
     const { resolve } = createResolver(import.meta.url)
     addServerScanDir(resolve('./runtime/server'))
-  }
+  },
 })
 ```
 
@@ -461,22 +461,22 @@ You can use `addServerScanDir` to add a directory to be scanned by Nitro. This i
 ::code-group
 
 ```ts twoslash [module.ts]
-import { defineNuxtModule, createResolver, addServerScanDir } from '@nuxt/kit'
+import { addServerScanDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: 'my-module',
     configKey: 'myModule',
   },
-  setup(options) {
+  setup (options) {
     const { resolve } = createResolver(import.meta.url)
     addServerScanDir(resolve('./runtime/server'))
-  }
+  },
 })
 ```
 
 ```ts twoslash [runtime/server/utils/index.ts]
-export function hello() {
+export function hello () {
   return 'Hello from server utils!'
 }
 ```
@@ -485,7 +485,7 @@ export function hello() {
 You can then use the `hello` function in your server code.
 
 ```ts twoslash [runtime/server/api/hello.ts]
-function hello() {
+function hello () {
   return 'Hello from server utils!'
 }
 // ---cut---

package/3.api/5.kit/12.resolving.md

@@ -165,10 +165,10 @@ Watch Vue School video about createResolver.
 ### Usage
 
 ```ts
-import { defineNuxtModule, createResolver } from '@nuxt/kit'
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  async setup (_, nuxt) {
+  setup (_, nuxt) {
     const { resolve, resolvePath } = createResolver(import.meta.url)
   },
 })

package/3.api/5.kit/14.builder.md

@@ -234,6 +234,7 @@ import type { ExtendConfigOptions } from '@nuxt/kit'
 import type { Plugin as VitePlugin } from 'vite'
 import type { WebpackPluginInstance } from 'webpack'
 import type { RspackPluginInstance } from '@rspack/core'
+
 interface AddBuildPluginFactory {
   vite?: () => VitePlugin | VitePlugin[]
   webpack?: () => WebpackPluginInstance | WebpackPluginInstance[]

package/3.api/5.kit/15.examples.md

@@ -16,10 +16,10 @@ Some examples of projects doing this already:
 Here is a brief example of how you might access the Vite config from a project; you could implement a similar approach to get the webpack configuration.
 
 ```js
-import { loadNuxt, buildNuxt } from '@nuxt/kit'
+import { buildNuxt, loadNuxt } from '@nuxt/kit'
 
 // https://github.com/nuxt/nuxt/issues/14534
-async function getViteConfig() {
+async function getViteConfig () {
   const nuxt = await loadNuxt({ cwd: process.cwd(), dev: false, overrides: { ssr: false } })
   return new Promise((resolve, reject) => {
     nuxt.hook('vite:extendConfig', (config, { isClient }) => {

package/3.api/5.kit/16.layers.md

@@ -20,9 +20,9 @@ Get the resolved directory paths for all layers in a Nuxt application. This func
 import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Access directories from all layers
     for (const [index, layer] of layerDirs.entries()) {
       console.log(`Layer ${index}:`)
@@ -32,7 +32,7 @@ export default defineNuxtModule({
       console.log(`  Pages: ${layer.appPages}`)
       // ... other directories
     }
-  }
+  },
 })
 ```
 
@@ -42,7 +42,7 @@ export default defineNuxtModule({
 // @errors: 2391
 import type { Nuxt } from '@nuxt/schema'
 // ---cut---
-function getLayerDirectories(nuxt?: Nuxt): LayerDirectories[]
+function getLayerDirectories (nuxt?: Nuxt): LayerDirectories[]
 
 interface LayerDirectories {
   /** Nuxt rootDir (`/` by default) */
@@ -110,9 +110,9 @@ import { resolve } from 'pathe'
 import { globby } from 'globby'
 
 export default defineNuxtModule({
-  async setup() {
+  async setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Find all component files across layers
     // Note: layerDirs[0] is the user layer (highest priority)
     // Later layers in the array have lower priority
@@ -120,37 +120,37 @@ export default defineNuxtModule({
     for (const [index, layer] of layerDirs.entries()) {
       const files = await globby('**/*.vue', {
         cwd: resolve(layer.app, 'components'),
-        absolute: true
+        absolute: true,
       })
       console.log(`Layer ${index} (${index === 0 ? 'user' : 'base'}):`, files.length, 'components')
       componentFiles.push(...files)
     }
-  }
+  },
 })
 ```
 
 **Adding templates from multiple layers:**
 
 ```ts twoslash
-import { defineNuxtModule, getLayerDirectories, addTemplate } from '@nuxt/kit'
-import { resolve, basename } from 'pathe'
-import { existsSync } from 'fs'
+import { addTemplate, defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
+import { basename, resolve } from 'pathe'
+import { existsSync } from 'node:fs'
 
 export default defineNuxtModule({
-  async setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Add a config file from each layer that has one
     for (const dirs of layerDirs) {
       const configPath = resolve(dirs.app, 'my-module.config.ts')
       if (existsSync(configPath)) {
         addTemplate({
           filename: `my-module-${basename(dirs.root)}.config.ts`,
-          src: configPath
+          src: configPath,
         })
       }
     }
-  }
+  },
 })
 ```
 
@@ -159,12 +159,12 @@ export default defineNuxtModule({
 ```ts twoslash
 import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
 import { resolve } from 'pathe'
-import { existsSync, readFileSync } from 'fs'
+import { existsSync, readFileSync } from 'node:fs'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Find the first (highest priority) layer that has a specific config file
     // This respects the layer priority system
     let configContent = null
@@ -176,7 +176,7 @@ export default defineNuxtModule({
         break // Use the first (highest priority) config found
       }
     }
-    
+
     // Alternative: Collect configs from all layers, with user layer taking precedence
     const allConfigs = {}
     for (const dirs of layerDirs.reverse()) { // Process from lowest to highest priority
@@ -186,7 +186,7 @@ export default defineNuxtModule({
         Object.assign(allConfigs, config) // Later assignments override earlier ones
       }
     }
-  }
+  },
 })
 ```
 
@@ -194,20 +194,20 @@ export default defineNuxtModule({
 
 ```ts twoslash
 import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
-import { existsSync } from 'fs'
+import { existsSync } from 'node:fs'
 import { resolve } from 'pathe'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Find layers that have a specific custom directory
-    const layersWithAssets = layerDirs.filter(layer => {
+    const layersWithAssets = layerDirs.filter((layer) => {
       return existsSync(resolve(layer.app, 'assets'))
     })
-    
+
     console.log(`Found ${layersWithAssets.length} layers with assets directory`)
-  }
+  },
 })
 ```
 

package/3.api/5.kit/3.compatibility.md

@@ -17,7 +17,7 @@ Checks if constraints are met for the current Nuxt version. If not, returns an a
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, checkNuxtCompatibility } from '@nuxt/kit'
+import { checkNuxtCompatibility, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   async setup (_options, nuxt) {
@@ -27,14 +27,14 @@ export default defineNuxtModule({
     } else {
       // do something
     }
-  }
+  },
 })
 ```
 
 ### Type
 
 ```ts
-function checkNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<NuxtCompatibilityIssues>;
+function checkNuxtCompatibility (constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<NuxtCompatibilityIssues>
 ```
 
 ### Parameters
@@ -58,7 +58,7 @@ Asserts that constraints are met for the current Nuxt version. If not, throws an
 // @errors: 2391
 import type { Nuxt, NuxtCompatibility } from '@nuxt/schema'
 // ---cut---
-function assertNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<true>;
+function assertNuxtCompatibility (constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<true>
 ```
 
 ### Parameters
@@ -84,14 +84,14 @@ export default defineNuxtModule({
     } else {
       // do something else
     }
-  }
+  },
 })
 ```
 
 ### Type
 
 ```ts
-function hasNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<boolean>;
+function hasNuxtCompatibility (constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<boolean>
 ```
 
 ### Parameters
@@ -110,20 +110,20 @@ Check if current Nuxt instance is of specified major version
 import { defineNuxtModule, isNuxtMajorVersion } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  async setup () {
+  setup () {
     if (isNuxtMajorVersion(3)) {
       // do something for Nuxt 3
     } else {
       // do something else for other versions
     }
-  }
+  },
 })
 ```
 
 ### Type
 
 ```ts
-function isNuxtMajorVersion(major: number, nuxt?: Nuxt): boolean;
+function isNuxtMajorVersion (major: number, nuxt?: Nuxt): boolean
 ```
 
 ### Parameters
@@ -143,7 +143,7 @@ Use `isNuxtMajorVersion(2, nuxt)` instead. This may be removed in \@nuxt/kit v5
 ### Type
 
 ```ts
-function isNuxt3(nuxt?: Nuxt): boolean;
+function isNuxt3 (nuxt?: Nuxt): boolean
 ```
 
 ### Parameters
@@ -161,7 +161,7 @@ Use `isNuxtMajorVersion(2, nuxt)` instead. This may be removed in \@nuxt/kit v5
 ### Type
 
 ```ts
-function isNuxt2(nuxt?: Nuxt): boolean;
+function isNuxt2 (nuxt?: Nuxt): boolean
 ```
 
 ### Parameters
@@ -175,7 +175,7 @@ Returns the current Nuxt version.
 ### Type
 
 ```ts
-function getNuxtVersion(nuxt?: Nuxt): string;
+function getNuxtVersion (nuxt?: Nuxt): string
 ```
 
 ### Parameters

package/3.api/5.kit/4.autoimports.md

@@ -29,22 +29,22 @@ Add imports to the Nuxt application. It makes your imports available in the Nuxt
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImports } from "@nuxt/kit";
+import { addImports, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const names = [
       'useStoryblok',
       'useStoryblokApi',
       'useStoryblokBridge',
       'renderRichText',
-      'RichTextSchema'
+      'RichTextSchema',
     ]
 
-    names.forEach((name) =>
-      addImports({ name, as: name, from: '@storyblok/vue' })
+    names.forEach(name =>
+      addImports({ name, as: name, from: '@storyblok/vue' }),
     )
-  }
+  },
 })
 ```
 
@@ -76,14 +76,14 @@ Add imports from a directory to the Nuxt application. It will automatically impo
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'
+import { addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: '@vueuse/motion',
     configKey: 'motion',
   },
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
     addImportsDir(resolver.resolve('./runtime/composables'))
   },
@@ -110,10 +110,10 @@ Add listed imports to the Nuxt application.
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImportsSources } from '@nuxt/kit'
+import { addImportsSources, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     addImportsSources({
       from: 'h3',
       imports: [
@@ -121,10 +121,10 @@ export default defineNuxtModule({
         'getQuery',
         'getRouterParams',
         'readBody',
-        'sendRedirect'
+        'sendRedirect',
       ],
     })
-  }
+  },
 })
 ```