mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-12 17:13:56 +00:00
154 lines
4.2 KiB
Markdown
154 lines
4.2 KiB
Markdown
---
|
|
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()`
|
|
|
|
### 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`
|
|
- `addPrerenderRoutes`
|
|
|
|
### 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/nuxt/blob/main/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)
|
|
```
|