Nuxt/docs/content/3.docs/4.advanced/3.kit.md

125 lines
3.2 KiB
Markdown

# Nuxt Kit
> Nuxt Kit provides composable utilities to make interacting with [/docs/advanced/hooks](Nuxt 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?)`
- `tryResolvePath (path, resolveOptions?)`
### 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?)`