# Nuxt Kit

> Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/advanced/hooks) and [Nuxt Builder Core](/docs/advanced/nuxt#the-nuxt-interface) and developing [Nuxt Modules](/docs/advanced/modules) super easy!

## Usage

### Install dependency

You can install the latest nuxt kit by adding it to `dependencies` of `package.json`. However, please consider always explicitly installing the `@nuxt/kit` package even if it is already installed by nuxt.

```json [package.json]
{
  "dependencies": {
    "@nuxt/kit": "npm:@nuxt/kit-edge@latest"
  }
}
```

### Import kit utilities

```js [test.mjs]
import { useNuxt } from '@nuxt/kit'
```

::alert{type="warning"}
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](/concepts/esm) meaning you **cannot** `require('@nuxt/kit')`. As a workaround, we can use dynamic import to use it in the CommonJS context:

```js [test.cjs]
// This does NOT work!
// const kit = require('@nuxt/kit')
async function main() {
  const kit = await import('@nuxt/kit')
}
main()
```

### Use kit utilities

Nuxt context is globally available using [unjs/unctx](https://github.com/unjs/unctx). Because of this, most kit composables do not need to have `nuxt` instances explicitly passed.

```js [test.mjs]
import { getNuxtVersion } from '@nuxt/kit'

// 3.0.0
console.log(getNuxtVersion())
```

## Utilities

### Modules

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/module)

- `installModule(module, inlineOptions)`

### Programmatic usage

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/loader)

- `loadNuxt(loadOptions)`
- `buildNuxt(nuxt)`
- `loadNuxtConfig(loadOptions)`

### Compatibility

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/compatibility.ts)

- `checkNuxtCompatibility(constraints)`
- `assertNuxtCompatibility(constraints)`
- `hasNuxtCompatibility(constraints)`
- `isNuxt2()`
- `isNuxt3()`
- `getNuxtVersion()`

### Components

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/components.ts)

- `addComponentsDir(dir)`
- `addComponent(componentObject)`

### Context

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/context.ts)

- `useNuxt()`

### Plugins

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/plugin.ts)

- `addPlugin(pluginOptions, { append? })`
- `addPluginTemplate(pluginOptions, { append? })`

### Templates

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/template.ts)

- `addTemplate(templateOptions)`

### Server

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/server.ts)

- `addServerMiddleware(serverMiddleware)`

### Resolving

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/resolve.ts)

- `resolvePath (path, resolveOptions?)`
- `resolveAlias (path, aliases?)`
- `findPath (paths, resolveOptions?)`
- `createResolver (base)`

### Builder

[source code](https://github.com/nuxt/framework/blob/main/packages/kit/src/build.ts)

- `extendWebpackConfig(callback, options?)`
- `extendViteConfig(callback, options?)`
- `addWebpackPlugin(webpackPlugin, options?)`
- `addVitePlugin(vitePlugin, options?)`