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

Nuxt Kit

Nuxt Kit provides composable utilities to make interacting with Nuxt Hooks and Nuxt Builder Core and developing Nuxt 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.

{
  "dependencies": {
    "@nuxt/kit": "npm:@nuxt/kit-edge@latest"
  }
}

Import kit utilities

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 meaning you cannot require('@nuxt/kit'). As a workaround, we can use dynamic import to use it in the CommonJS context:

// 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. Because of this, most kit composables do not need to have nuxt instances explicitly passed.

import { getNuxtVersion } from '@nuxt/kit'

// 3.0.0
console.log(getNuxtVersion())

Utilities

Modules

source code

• installModule(module, inlineOptions)

Programmatic usage

source code

• loadNuxt(loadOptions)
• buildNuxt(nuxt)
• loadNuxtConfig(loadOptions)

Compatibility

source code

• checkNuxtCompatibility(constraints)
• assertNuxtCompatibility(constraints)
• hasNuxtCompatibility(constraints)
• isNuxt2()
• isNuxt3()
• getNuxtVersion()

Components

source code

• addComponentsDir(dir)
• addComponent(componentObject)

Context

source code

• useNuxt()

Plugins

source code

• addPlugin(pluginOptions, { append? })
• addPluginTemplate(pluginOptions, { append? })

Templates

source code

• addTemplate(templateOptions)

Server

source code

• addServerMiddleware(serverMiddleware)

Resolving

source code

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

Builder

source code

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