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

package/2.guide/3.going-further/1.internals.md

@@ -36,31 +36,31 @@ Check [Nuxt App](/docs/4.x/api/composables/use-nuxt-app) for more information ab
 
 `nuxtApp` has the following properties:
 
-```js
-const nuxtApp = {
-  vueApp, // the global Vue application: https://vuejs.org/api/application.html#application-api
+```ts
+interface NuxtApp {
+  vueApp // the global Vue application: https://vuejs.org/api/application.html#application-api
 
-  versions, // an object containing Nuxt and Vue versions
+  versions // an object containing Nuxt and Vue versions
 
   // These let you call and add runtime NuxtApp hooks
   // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
-  hooks,
-  hook,
-  callHook,
+  hooks
+  hook
+  callHook
 
   // Only accessible on server-side
   ssrContext: {
-    url,
-    req,
-    res,
-    runtimeConfig,
-    noSSR,
-  },
+    url
+    req
+    res
+    runtimeConfig
+    noSSR
+  }
 
   // This will be stringified and passed from server to client
   payload: {
-    serverRendered: true,
-    data: {},
+    serverRendered: true
+    data: {}
     state: {}
   }
 

package/2.guide/3.going-further/10.runtime-config.md

@@ -14,9 +14,9 @@ export default defineNuxtConfig({
     apiSecret: '123',
     // Keys within public, will be also exposed to the client-side
     public: {
-      apiBase: '/api'
-    }
-  }
+      apiBase: '/api',
+    },
+  },
 })
 ```
 
@@ -78,7 +78,7 @@ export default defineNuxtConfig({
     apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable
     public: {
       apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
-    }
+    },
   },
 })
 ```
@@ -127,7 +127,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig()
 
   console.log('API base URL:', config.public.apiBase)
-});
+})
 ```
 
 ### Server Routes
@@ -139,8 +139,8 @@ export default defineEventHandler(async (event) => {
   const { apiSecret } = useRuntimeConfig(event)
   const result = await $fetch('https://my.api.com/test', {
     headers: {
-      Authorization: `Bearer ${apiSecret}`
-    }
+      Authorization: `Bearer ${apiSecret}`,
+    },
   })
   return result
 })

package/2.guide/3.going-further/2.hooks.md

@@ -13,11 +13,11 @@ These hooks are available for [Nuxt Modules](/docs/4.x/guide/going-further/modul
 
 ### Within `nuxt.config.ts`
 
-```js [nuxt.config.ts]
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   hooks: {
-    close: () => { }
-  }
+    close: () => { },
+  },
 })
 ```
 
@@ -29,7 +29,7 @@ import { defineNuxtModule } from '@nuxt/kit'
 export default defineNuxtModule({
   setup (options, nuxt) {
     nuxt.hook('close', async () => { })
-  }
+  },
 })
 ```
 
@@ -41,7 +41,7 @@ Explore all available Nuxt hooks.
 
 App hooks can be mainly used by [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
 
-```js [app/plugins/test.ts]
+```ts [app/plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('page:start', () => {
     /* your code goes here */
@@ -57,7 +57,7 @@ Explore all available App hooks.
 
 These hooks are available for [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
 
-```js [~/server/plugins/test.ts]
+```ts [~/server/plugins/test.ts]
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html, { event }) => {
     console.log('render:html', html)
@@ -79,7 +79,7 @@ Learn more about available Nitro lifecycle hooks.
 You can define your own custom hooks support by extending Nuxt's hook interfaces.
 
 ```ts
-import { HookResult } from "@nuxt/schema";
+import type { HookResult } from '@nuxt/schema'
 
 declare module '#app' {
   interface RuntimeNuxtHooks {
@@ -92,7 +92,7 @@ declare module '#app' {
 
 declare module 'nitropack/types' {
   interface NitroRuntimeHooks {
-    'your-nitro-hook': () => void;
+    'your-nitro-hook': () => void
   }
 }
 ```

package/2.guide/3.going-further/3.modules.md

@@ -136,7 +136,7 @@ export default function (inlineOptions, nuxt) {
   // You can do whatever you like here..
   console.log(inlineOptions.token) // `123`
   console.log(nuxt.options.dev) // `true` or `false`
-  nuxt.hook('ready', async nuxt => {
+  nuxt.hook('ready', (nuxt) => {
     console.log('Nuxt is ready')
   })
 }
@@ -148,7 +148,7 @@ You can get type-hint support for this function using the higher-level `defineNu
 import { defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule((options, nuxt) => {
-  nuxt.hook('pages:extend', pages => {
+  nuxt.hook('pages:extend', (pages) => {
     console.log(`Discovered ${pages.length} pages`)
   })
 })
@@ -170,8 +170,8 @@ export default defineNuxtModule({
     // Compatibility constraints
     compatibility: {
       // Semver version of supported nuxt versions
-      nuxt: '>=3.0.0'
-    }
+      nuxt: '>=3.0.0',
+    },
   },
   // Default configuration options for your module, can also be a function returning those
   defaults: {},
@@ -191,13 +191,13 @@ export default defineNuxtModule({
       overrides: {},
       // Any configuration that should be set. It will override module defaults but
       // will not override any configuration set in `nuxt.options`.
-      defaults: {}
-    }
+      defaults: {},
+    },
   },
   // The function holding your module logic, it can be asynchronous
-  setup(moduleOptions, nuxt) {
+  setup (moduleOptions, nuxt) {
     // ...
-  }
+  },
 })
 ```
 
@@ -283,7 +283,7 @@ export default defineNuxtModule({
     // We create the `experimental` object if it doesn't exist yet
     nuxt.options.experimental ||= {}
     nuxt.options.experimental.componentIslands = true
-  }
+  },
 })
 ```
 
@@ -306,9 +306,9 @@ import { defu } from 'defu'
 export default defineNuxtModule({
   setup (options, nuxt) {
     nuxt.options.runtimeConfig.public.myModule = defu(nuxt.options.runtimeConfig.public.myModule, {
-      foo: options.foo
+      foo: options.foo,
     })
-  }
+  },
 })
 ```
 
@@ -317,6 +317,8 @@ Note that we use [`defu`](https://github.com/unjs/defu) to extend the public run
 You can then access your module options in a plugin, component, the application like any other runtime configuration:
 
 ```js
+import { useRuntimeConfig } from '@nuxt/kit'
+
 const options = useRuntimeConfig().public.myModule
 ```
 
@@ -335,7 +337,7 @@ Watch Vue School video about passing and exposing Nuxt module options.
 Plugins are a common way for a module to add runtime logic. You can use the `addPlugin` utility to register them from your module.
 
 ```js
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup (options, nuxt) {
@@ -343,7 +345,7 @@ export default defineNuxtModule({
     const resolver = createResolver(import.meta.url)
 
     addPlugin(resolver.resolve('./runtime/plugin'))
-  }
+  },
 })
 ```
 
@@ -353,43 +355,43 @@ export default defineNuxtModule({
 
 If your module should provide Vue components, you can use the `addComponent` utility to add them as auto-imports for Nuxt to resolve.
 
-```js
-import { defineNuxtModule, addComponent } from '@nuxt/kit'
+```ts twoslash
+import { addComponent, createResolver, defineNuxtModule, useRuntimeConfig } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     // From the runtime directory
     addComponent({
       name: 'MySuperComponent', // name of the component to be used in vue templates
       export: 'MySuperComponent', // (optional) if the component is a named (rather than default) export
-      filePath: resolver.resolve('runtime/components/MySuperComponent.vue')
+      filePath: resolver.resolve('runtime/components/MySuperComponent.vue'),
     })
 
     // From a library
     addComponent({
       name: 'MyAwesomeComponent', // name of the component to be used in vue templates
       export: 'MyAwesomeComponent', // (optional) if the component is a named (rather than default) export
-      filePath: '@vue/awesome-components'
+      filePath: '@vue/awesome-components',
     })
-  }
+  },
 })
 ```
 
 Alternatively, you can add an entire directory by using `addComponentsDir`.
 
 ```ts
-import { defineNuxtModule, addComponentsDir } from '@nuxt/kit'
+import { addComponentsDir, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     addComponentsDir({
-      path: resolver.resolve('runtime/components')
+      path: resolver.resolve('runtime/components'),
     })
-  }
+  },
 })
 ```
 
@@ -398,66 +400,66 @@ export default defineNuxtModule({
 If your module should provide composables, you can use the `addImports` utility to add them as auto-imports for Nuxt to resolve.
 
 ```ts
-import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit'
+import { addImports, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     addImports({
       name: 'useComposable', // name of the composable to be used
       as: 'useComposable',
-      from: resolver.resolve('runtime/composables/useComposable') // path of composable
+      from: resolver.resolve('runtime/composables/useComposable'), // path of composable
     })
-  }
+  },
 })
 ```
 
 Alternatively, you can add an entire directory by using `addImportsDir`.
 
 ```ts
-import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'
+import { addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     addImportsDir(resolver.resolve('runtime/composables'))
-  }
+  },
 })
 ```
 
 #### Injecting Server Routes With `addServerHandler`
 
 ```ts
-import { defineNuxtModule, addServerHandler, createResolver } from '@nuxt/kit'
+import { addServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     addServerHandler({
       route: '/api/hello',
-      handler: resolver.resolve('./runtime/server/api/hello/index.get')
+      handler: resolver.resolve('./runtime/server/api/hello/index.get'),
     })
-  }
+  },
 })
 ```
 
 You can also add a dynamic server route:
 
 ```ts
-import { defineNuxtModule, addServerHandler, createResolver } from '@nuxt/kit'
+import { addServerHandler, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     addServerHandler({
       route: '/api/hello/:name',
-      handler: resolver.resolve('./runtime/server/api/hello/[name].get')
+      handler: resolver.resolve('./runtime/server/api/hello/[name].get'),
     })
-  }
+  },
 })
 ```
 
@@ -466,34 +468,34 @@ export default defineNuxtModule({
 If your module should provide other kinds of assets, they can also be injected. Here's a simple example module injecting a stylesheet through Nuxt's `css` array.
 
 ```js
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     nuxt.options.css.push(resolver.resolve('./runtime/style.css'))
-  }
+  },
 })
 ```
 
 And a more advanced one, exposing a folder of assets through [Nitro](/docs/4.x/guide/concepts/server-engine)'s `publicAssets` option:
 
 ```js
-import { defineNuxtModule, createResolver } from '@nuxt/kit'
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
-    nuxt.hook('nitro:config', async (nitroConfig) => {
+    nuxt.hook('nitro:config', (nitroConfig) => {
       nitroConfig.publicAssets ||= []
       nitroConfig.publicAssets.push({
         dir: resolver.resolve('./runtime/public'),
-        maxAge: 60 * 60 * 24 * 365 // 1 year
+        maxAge: 60 * 60 * 24 * 365, // 1 year
       })
     })
-  }
+  },
 })
 ```
 
@@ -502,7 +504,7 @@ export default defineNuxtModule({
 If your module depends on other modules, you can add them by using Nuxt Kit's `installModule` utility. For example, if you wanted to use Nuxt Tailwind in your module, you could add it as below:
 
 ```ts
-import { defineNuxtModule, createResolver, installModule } from '@nuxt/kit'
+import { createResolver, defineNuxtModule, installModule } from '@nuxt/kit'
 
 export default defineNuxtModule<ModuleOptions>({
   async setup (options, nuxt) {
@@ -519,12 +521,12 @@ export default defineNuxtModule<ModuleOptions>({
         content: {
           files: [
             resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
-            resolver.resolve('./runtime/*.{mjs,js,ts}')
-          ]
-        }
-      }
+            resolver.resolve('./runtime/*.{mjs,js,ts}'),
+          ],
+        },
+      },
     })
-  }
+  },
 })
 ```
 
@@ -533,21 +535,21 @@ export default defineNuxtModule<ModuleOptions>({
 [Lifecycle hooks](/docs/4.x/guide/going-further/hooks) allow you to expand almost every aspect of Nuxt. Modules can hook to them programmatically or through the `hooks` map in their definition.
 
 ```js
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   // Hook to the `app:error` hook through the `hooks` map
   hooks: {
     'app:error': (err) => {
-      console.info(`This error happened: ${err}`);
-    }
+      console.info(`This error happened: ${err}`)
+    },
   },
   setup (options, nuxt) {
     // Programmatically hook to the `pages:extend` hook
     nuxt.hook('pages:extend', (pages) => {
-      console.info(`Discovered ${pages.length} pages`);
+      console.info(`Discovered ${pages.length} pages`)
     })
-  }
+  },
 })
 ```
 
@@ -568,10 +570,10 @@ import { defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup (options, nuxt) {
-    nuxt.hook('close', async nuxt => {
+    nuxt.hook('close', async (nuxt) => {
       // Your custom code here
     })
-  }
+  },
 })
 ```
 ::
@@ -597,7 +599,7 @@ export default defineNuxtModule({
       const payload = { foo: 'bar' }
       await nuxt.callHook('my-module:custom-hook', payload)
     })
-  }
+  },
 })
 ```
 
@@ -606,32 +608,32 @@ export default defineNuxtModule({
 If you need to add a virtual file that can be imported into the user's app, you can use the `addTemplate` utility.
 
 ```ts
-import { defineNuxtModule, addTemplate } from '@nuxt/kit'
+import { addTemplate, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup (options, nuxt) {
     // The file is added to Nuxt's internal virtual file system and can be imported from '#build/my-module-feature.mjs'
     addTemplate({
       filename: 'my-module-feature.mjs',
-      getContents: () => 'export const myModuleFeature = () => "hello world !"'
+      getContents: () => 'export const myModuleFeature = () => "hello world !"',
     })
-  }
+  },
 })
 ```
 
 For the server, you should use the `addServerTemplate` utility instead.
 
 ```ts
-import { defineNuxtModule, addServerTemplate } from '@nuxt/kit'
+import { addServerTemplate, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup (options, nuxt) {
     // The file is added to Nitro's virtual file system and can be imported in the server code from 'my-server-module.mjs'
     addServerTemplate({
       filename: 'my-server-module.mjs',
-      getContents: () => 'export const myServerModule = () => "hello world !"'
+      getContents: () => 'export const myServerModule = () => "hello world !"',
     })
-  }
+  },
 })
 ```
 
@@ -644,7 +646,7 @@ writes a template to the disk and adds a reference to it in the generated `nuxt.
 If your module should augment types handled by Nuxt, you can use `addTypeTemplate` to perform this operation:
 
 ```js
-import { defineNuxtModule, addTemplate, addTypeTemplate } from '@nuxt/kit'
+import { addTemplate, addTypeTemplate, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup (options, nuxt) {
@@ -658,9 +660,9 @@ export default defineNuxtModule({
           interface NitroRouteRules extends MyModuleNitroRules {}
           interface NitroRouteConfig extends MyModuleNitroRules {}
         }
-        export {}`
+        export {}`,
     })
-  }
+  },
 })
 ```
 
@@ -678,7 +680,7 @@ nuxt.hook('prepare:types', ({ references }) => {
 If you need to update your templates/virtual files, you can leverage the `updateTemplates` utility like this :
 
 ```ts
-nuxt.hook('builder:watch', async (event, path) => {
+nuxt.hook('builder:watch', (event, path) => {
   if (path.includes('my-module-feature.config')) {
     // This will reload the template that you registered
     updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
@@ -710,24 +712,24 @@ We're still discussing and exploring how to ease unit and integration testing on
 
 In practice, the fixture:
 
-```js [test/fixtures/ssr/nuxt.config.ts]
+```ts [test/fixtures/ssr/nuxt.config.ts]
 // 1. Create a Nuxt application to be used as a "fixture"
 import MyModule from '../../../src/module'
 
 export default defineNuxtConfig({
   ssr: true,
   modules: [
-    MyModule
-  ]
+    MyModule,
+  ],
 })
 ```
 
 And its test:
 
-```js [test/rendering.ts]
-import { describe, it, expect } from 'vitest'
+```ts [test/rendering.ts]
+import { describe, expect, it } from 'vitest'
 import { fileURLToPath } from 'node:url'
-import { setup, $fetch } from '@nuxt/test-utils/e2e'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
 
 describe('ssr', async () => {
   // 2. Setup Nuxt with this fixture inside your test file

package/2.guide/3.going-further/4.kit.md

@@ -29,7 +29,7 @@ You can install the latest Nuxt Kit by adding it to the `dependencies` section o
 
 ### Import Kit Utilities
 
-```js [test.mjs]
+```ts [test.mjs]
 import { useNuxt } from '@nuxt/kit'
 ```
 
@@ -41,10 +41,10 @@ Nuxt Kit utilities are only available for modules and not meant to be imported i
 
 Nuxt Kit is an [esm-only package](/docs/4.x/guide/concepts/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
 
-```js [test.cjs]
+```ts [test.cjs]
 // This does NOT work!
 // const kit = require('@nuxt/kit')
-async function main() {
+async function main () {
   const kit = await import('@nuxt/kit')
 }
 main()

package/2.guide/3.going-further/6.nuxt-app.md

@@ -50,7 +50,7 @@ You can provide helpers to be usable across all composables and application. Thi
 
 ```ts
 const nuxtApp = useNuxtApp()
-nuxtApp.provide('hello', (name) => `Hello ${name}!`)
+nuxtApp.provide('hello', name => `Hello ${name}!`)
 
 console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
 ```