mirror of https://github.com/nuxt/nuxt.git
125 lines
3.2 KiB
Markdown
125 lines
3.2 KiB
Markdown
# 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?)`
|
|
- `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?)`
|