@nuxt/docs 4.1.2 → 4.2.0

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

@@ -4,7 +4,7 @@ description: "Learn how to create a Nuxt Module to integrate, enhance or extend
 image: '/socials/module-author-guide.jpg'
 ---
 
-Nuxt's [configuration](/docs/api/nuxt-config) and [hooks](/docs/guide/going-further/hooks) systems make it possible to customize every aspect of Nuxt and add any integration you might need (Vue plugins, CMS, server routes, components, logging, etc.).
+Nuxt's [configuration](/docs/4.x/api/nuxt-config) and [hooks](/docs/4.x/guide/going-further/hooks) systems make it possible to customize every aspect of Nuxt and add any integration you might need (Vue plugins, CMS, server routes, components, logging, etc.).
 
 **Nuxt Modules** are functions that sequentially run when starting Nuxt in development mode using `nuxt dev` or building a project for production with `nuxt build`.
 With modules, you can encapsulate, properly test, and share custom solutions as npm packages without adding unnecessary boilerplate to your project, or requiring changes to Nuxt itself.
@@ -117,7 +117,7 @@ Nuxt Modules come with a variety of powerful APIs and patterns allowing them to
 We can consider two kinds of Nuxt Modules:
 
 - published modules are distributed on npm - you can see a list of some community modules on [the Nuxt website](/modules).
-- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/guide/directory-structure/modules).
+- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/4.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/4.x/guide/directory-structure/modules).
 
 In either case, their anatomy is similar.
 
@@ -136,19 +136,19 @@ 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')
   })
 }
 ```
 
-You can get type-hint support for this function using the higher-level `defineNuxtModule` helper provided by [Nuxt Kit](/docs/guide/going-further/kit).
+You can get type-hint support for this function using the higher-level `defineNuxtModule` helper provided by [Nuxt Kit](/docs/4.x/guide/going-further/kit).
 
 ```ts
 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) {
     // ...
-  }
+  },
 })
 ```
 
@@ -224,9 +224,9 @@ Modules, like everything in a Nuxt configuration, aren't included in your applic
 Inside the runtime directory, you can provide any kind of assets related to the Nuxt App:
 - Vue components
 - Composables
-- [Nuxt plugins](/docs/guide/directory-structure/plugins)
+- [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins)
 
-To the [server engine](/docs/guide/concepts/server-engine), Nitro:
+To the [server engine](/docs/4.x/guide/concepts/server-engine), Nitro:
 - API routes
 - Middlewares
 - Nitro plugins
@@ -237,10 +237,10 @@ Or any other kind of asset you want to inject in users' Nuxt applications:
 - Images
 - etc.
 
-You'll then be able to inject all those assets inside the application from your [module definition](#module-definition).
+You'll then be able to inject all those assets inside the application from your [module definition](/docs/4.x/guide/going-further/modules#module-definition).
 
 ::tip
-Learn more about asset injection in [the recipes section](#recipes).
+Learn more about asset injection in [the recipes section](/docs/4.x/guide/going-further/modules#recipes).
 ::
 
 ::warning
@@ -259,13 +259,13 @@ Modules come with a set of first-party tools to help you with their development.
 
 #### `@nuxt/kit`
 
-[Nuxt Kit](/docs/guide/going-further/kit) provides composable utilities to help your module interact with Nuxt applications. It's recommended to use Nuxt Kit utilities over manual alternatives whenever possible to ensure better compatibility and code readability of your module.
+[Nuxt Kit](/docs/4.x/guide/going-further/kit) provides composable utilities to help your module interact with Nuxt applications. It's recommended to use Nuxt Kit utilities over manual alternatives whenever possible to ensure better compatibility and code readability of your module.
 
-:read-more{to="/docs/guide/going-further/kit"}
+:read-more{to="/docs/4.x/guide/going-further/kit"}
 
 #### `@nuxt/test-utils`
 
-[Nuxt Test Utils](/docs/getting-started/testing) is a collection of utilities to help set up and run Nuxt applications within your module tests.
+[Nuxt Test Utils](/docs/4.x/getting-started/testing) is a collection of utilities to help set up and run Nuxt applications within your module tests.
 
 ### Recipes
 
@@ -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
-  }
+  },
 })
 ```
 
@@ -295,7 +295,7 @@ Watch Vue School video about altering Nuxt configuration.
 
 #### Exposing Options to Runtime
 
-Because modules aren't part of the application runtime, their options aren't either. However, in many cases, you might need access to some of these module options within your runtime code. We recommend exposing the needed config using Nuxt's [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig).
+Because modules aren't part of the application runtime, their options aren't either. However, in many cases, you might need access to some of these module options within your runtime code. We recommend exposing the needed config using Nuxt's [`runtimeConfig`](/docs/4.x/api/nuxt-config#runtimeconfig).
 
 <!-- TODO: Update after #18466 (or equivalent) -->
 
@@ -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
 ```
 
@@ -324,7 +326,7 @@ const options = useRuntimeConfig().public.myModule
 Be careful not to expose any sensitive module configuration on the public runtime config, such as private API keys, as they will end up in the public bundle.
 ::
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/passing-and-exposing-module-options?friend=nuxt" target="_blank"}
 Watch Vue School video about passing and exposing Nuxt module options.
@@ -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,53 +345,53 @@ export default defineNuxtModule({
     const resolver = createResolver(import.meta.url)
 
     addPlugin(resolver.resolve('./runtime/plugin'))
-  }
+  },
 })
 ```
 
-:read-more{to="/docs/guide/going-further/kit"}
+:read-more{to="/docs/4.x/guide/going-further/kit"}
 
 #### Injecting Vue Components With `addComponent`
 
 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,92 +468,108 @@ 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/guide/concepts/server-engine)'s `publicAssets` option:
+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
       })
     })
-  }
+  },
 })
 ```
 
 #### Using Other Modules in Your Module
 
-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:
+If your module depends on other modules, you can specify them using the `moduleDependencies` option. This provides a more robust way to handle module dependencies with version constraints and configuration merging:
 
 ```ts
-import { defineNuxtModule, createResolver, installModule } from '@nuxt/kit'
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
 
-export default defineNuxtModule<ModuleOptions>({
-  async setup (options, nuxt) {
-    const resolver = createResolver(import.meta.url)
+const resolver = createResolver(import.meta.url)
 
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'my-module',
+  },
+  moduleDependencies: {
+    '@nuxtjs/tailwindcss': {
+      // You can specify a version constraint for the module
+      version: '>=6',
+      // Any configuration that should override `nuxt.options`
+      overrides: {
+        exposeConfig: true,
+      },
+      // Any configuration that should be set. It will override module defaults but
+      // will not override any configuration set in `nuxt.options`
+      defaults: {
+        config: {
+          darkMode: 'class',
+          content: {
+            files: [
+              resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
+              resolver.resolve('./runtime/*.{mjs,js,ts}'),
+            ],
+          },
+        },
+      },
+    },
+  },
+  setup (options, nuxt) {
     // We can inject our CSS file which includes Tailwind's directives
     nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))
-
-    await installModule('@nuxtjs/tailwindcss', {
-      // module configuration
-      exposeConfig: true,
-      config: {
-        darkMode: 'class',
-        content: {
-          files: [
-            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
-            resolver.resolve('./runtime/*.{mjs,js,ts}')
-          ]
-        }
-      }
-    })
-  }
+  },
 })
 ```
 
+::callout{type="info"}
+The `moduleDependencies` option replaces the deprecated `installModule` function and ensures proper setup order and configuration merging.
+::
+
 #### Using Hooks
 
-[Lifecycle hooks](/docs/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.
+[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`)
     })
-  }
+  },
 })
 ```
 
-:read-more{to="/docs/api/advanced/hooks"}
+:read-more{to="/docs/4.x/api/advanced/hooks"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/nuxt-lifecycle-hooks?friend=nuxt" target="_blank"}
 Watch Vue School video about using Nuxt lifecycle hooks in modules.
@@ -568,10 +586,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 +615,7 @@ export default defineNuxtModule({
       const payload = { foo: 'bar' }
       await nuxt.callHook('my-module:custom-hook', payload)
     })
-  }
+  },
 })
 ```
 
@@ -606,32 +624,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 +662,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 +676,9 @@ export default defineNuxtModule({
           interface NitroRouteRules extends MyModuleNitroRules {}
           interface NitroRouteConfig extends MyModuleNitroRules {}
         }
-        export {}`
+        export {}`,
     })
-  }
+  },
 })
 ```
 
@@ -678,7 +696,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' })
@@ -700,7 +718,7 @@ We're still discussing and exploring how to ease unit and integration testing on
 
 #### End to End
 
-[Nuxt Test Utils](/docs/getting-started/testing) is the go-to library to help you test your module in an end-to-end way. Here's the workflow to adopt with it:
+[Nuxt Test Utils](/docs/4.x/getting-started/testing) is the go-to library to help you test your module in an end-to-end way. Here's the workflow to adopt with it:
 
 1. Create a Nuxt application to be used as a "fixture" inside `test/fixtures/*`
 2. Setup Nuxt with this fixture inside your test file
@@ -710,24 +728,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
@@ -754,7 +772,7 @@ An example of such a workflow is available on [the module starter](https://githu
 
 #### Manual QA With Playground and Externally
 
-Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](#how-to-develop).
+Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](/docs/4.x/guide/going-further/modules#how-to-develop).
 
 You can test your module with other Nuxt applications (applications that are not part of your module repository) locally. To do so, you can use [`npm pack`](https://docs.npmjs.com/cli/commands/npm-pack) command, or your package manager equivalent, to create a tarball from your module. Then in your test project, you can add your module to `package.json` packages as: `"my-module": "file:/path/to/tarball.tgz"`.
 
@@ -810,7 +828,7 @@ export default defineNuxtModule({
 })
 ```
 
-This pattern prevents unnecessary work on every build and provides a better developer experience. See the [lifecycle hooks documentation](/docs/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) for more details.
+This pattern prevents unnecessary work on every build and provides a better developer experience. See the [lifecycle hooks documentation](/docs/4.x/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) for more details.
 
 #### Be TypeScript Friendly
 
@@ -820,7 +838,7 @@ Exposing types and using TypeScript to develop modules benefits users even when
 
 #### Avoid CommonJS Syntax
 
-Nuxt relies on native ESM. Please read [Native ES Modules](/docs/guide/concepts/esm) for more information.
+Nuxt relies on native ESM. Please read [Native ES Modules](/docs/4.x/guide/concepts/esm) for more information.
 
 #### Document Module Usage
 

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

@@ -3,9 +3,9 @@ title: "Nuxt Kit"
 description: "@nuxt/kit provides features for module authors."
 ---
 
-Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/api/advanced/hooks), the [Nuxt Interface](/docs/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/docs/guide/going-further/modules) super easy.
+Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/4.x/api/advanced/hooks), the [Nuxt Interface](/docs/4.x/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/docs/4.x/guide/going-further/modules) super easy.
 
-::read-more{to="/docs/api/kit"}
+::read-more{to="/docs/4.x/api/kit"}
 Discover all Nuxt Kit utilities.
 ::
 
@@ -29,22 +29,22 @@ 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'
 ```
 
-:read-more{to="/docs/api/kit"}
+:read-more{to="/docs/4.x/api/kit"}
 
 ::note
 Nuxt Kit utilities are only available for modules and not meant to be imported in runtime (components, Vue composables, pages, plugins, or server routes).
 ::
 
-Nuxt Kit is an [esm-only package](/docs/guide/concepts/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
+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()