Nuxt/docs/3.api/4.advanced/2.kit.md

---
title: "Kit Utilities"
description: Nuxt Kit provides composable utilities to help interacting with Nuxt Hooks and Nuxt Builder.
---

# Kit Utilities

::ReadMore{link="/docs/guide/going-further/kit"}
::

## Utilities

### Modules

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

- `installModule(module, inlineOptions)`

### Programmatic Usage

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

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

### Compatibility

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

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

### Auto-imports

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

- `addImports(imports)`
- `addImportsDir(importDirs, { prepend? })`
- `addImportsSources(importSources)`

### Components

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

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

### Context

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

- `useNuxt()`
- `tryUseNuxt()`

### Pages

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

- `extendPages (callback: pages => void)`
- `extendRouteRules (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)`
- `addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], options: AddRouteMiddlewareOptions)`

### Plugins

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

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

### Templates

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

- `addTemplate(templateOptions)`
- `addTypeTemplate(templateOptions)`
- `updateTemplates({ filter?: ResolvedNuxtTemplate => boolean })`

### Nitro

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

- `addServerHandler (handler)`
- `addDevServerHandler (handler)`
- `useNitro()` (only usable after `ready` hook)
- `addServerPlugin`
- `prerenderRoutes`

### Resolving

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

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

### Logging

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

- `useLogger(scope?)`

### Builder

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

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

## Examples

### Accessing Nuxt Vite Config

If you are building an integration that needs access to the runtime Vite or webpack config that Nuxt uses, it is possible to extract this using Kit utilities.

Some examples of projects doing this already:

- [histoire](https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-nuxt/src/index.ts)
- [nuxt-vitest](https://github.com/danielroe/nuxt-vitest/blob/main/packages/nuxt-vitest/src/config.ts)
- [@storybook-vue/nuxt](https://github.com/storybook-vue/storybook-nuxt/blob/main/packages/storybook-nuxt/src/preset.ts)

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'

// https://github.com/nuxt/nuxt/issues/14534
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 }) => {
      if (isClient) {
        resolve(config)
        throw new Error('_stop_')
      }
    })
    buildNuxt(nuxt).catch((err) => {
      if (!err.toString().includes('_stop_')) {
        reject(err)
      }
    })
  }).finally(() => nuxt.close())
}

const viteConfig = await getViteConfig()
console.log(viteConfig)
```