0
# @nuxt/kit
1

2
@nuxt/kit is a comprehensive toolkit for authoring Nuxt modules and programmatically interacting with Nuxt applications. It provides utilities for module definition, configuration loading, component management, plugin registration, template handling, build system integration, runtime configuration, routing, and development tools.
3

4
## Package Information
5

6
- **Package Name**: @nuxt/kit
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @nuxt/kit`
10

11
## Core Imports
12

13
```typescript
14
import { defineNuxtModule, useNuxt, addComponent } from "@nuxt/kit";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { defineNuxtModule, useNuxt, addComponent } = require("@nuxt/kit");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import { defineNuxtModule, addComponent, addPlugin, useNuxt } from "@nuxt/kit";
27

28
// Define a Nuxt module
29
export default defineNuxtModule({
30
  meta: {
31
    name: "my-module",
32
    configKey: "myModule"
33
  },
34
  defaults: {},
35
  setup(options, nuxt) {
36
    // Add a component
37
    addComponent({
38
      name: "MyComponent",
39
      filePath: "~/components/MyComponent.vue"
40
    });
41

42
    // Add a plugin
43
    addPlugin("~/plugins/my-plugin.client.js");
44

45
    // Access the Nuxt instance
46
    const nuxtInstance = useNuxt();
47
  }
48
});
49
```
50

51
## Architecture
52

53
@nuxt/kit is built around several key systems:
54

55
- **Module System**: Core functionality for defining, installing, and managing Nuxt modules
56
- **Configuration System**: Loading and extending Nuxt configuration with layer support
57
- **Build Integration**: Plugin and configuration management for Vite, Webpack, and Rspack
58
- **Component System**: Registration and auto-discovery of Vue components
59
- **Template System**: Virtual file generation and TypeScript declarations
60
- **Context Management**: Nuxt instance access and async context handling
61
- **Development Tools**: Path resolution, logging, and compatibility checking
62

63
## Capabilities
64

65
### Module System
66

67
Module definition, installation, and compatibility checking for building Nuxt modules and extensions.
68

69
```typescript { .api }
70
function defineNuxtModule<T>(definition: ModuleDefinition<T>): NuxtModule<T>;
71
function installModule<T>(moduleToInstall: T, inlineOptions?: any, nuxt?: Nuxt): Promise<NuxtModule>;
72
function hasNuxtModule(moduleName: string, nuxt?: Nuxt): boolean;
73
```
74

75
[Module System](./module-system.md)
76

77
### Configuration & Loading
78

79
Configuration loading and schema management with support for layers and custom configurations.
80

81
```typescript { .api }
82
function loadNuxtConfig(opts: LoadNuxtConfigOptions): Promise<NuxtOptions>;
83
function loadNuxt(opts: LoadNuxtOptions): Promise<Nuxt>;
84
function extendNuxtSchema(def: SchemaDefinition | (() => SchemaDefinition)): void;
85
```
86

87
[Configuration & Loading](./configuration.md)
88

89
### Build System Integration
90

91
Build plugin and configuration management for multiple bundlers including Vite, Webpack, and Rspack.
92

93
```typescript { .api }
94
function addVitePlugin(plugin: VitePlugin | VitePlugin[], options?: ExtendViteConfigOptions): void;
95
function addWebpackPlugin(plugin: WebpackPluginInstance | WebpackPluginInstance[], options?: ExtendWebpackConfigOptions): void;
96
function extendViteConfig(fn: (config: ViteConfig) => void, options?: ExtendViteConfigOptions): void;
97
```
98

99
[Build System](./build-system.md)
100

101
### Component Management
102

103
Component registration, directory scanning, and auto-discovery for Vue components.
104

105
```typescript { .api }
106
function addComponent(opts: AddComponentOptions): void;
107
function addComponentsDir(dir: ComponentsDir, opts?: { prepend?: boolean }): void;
108
function addComponentExports(opts: Omit<AddComponentOptions, 'name'> & { prefix?: string }): void;
109
```
110

111
[Component Management](./components.md)
112

113
### Context & Runtime
114

115
Nuxt instance access, runtime configuration, and context management utilities.
116

117
```typescript { .api }
118
function useNuxt(): Nuxt;
119
function tryUseNuxt(): Nuxt | null;
120
function useRuntimeConfig(): RuntimeConfig;
121
function updateRuntimeConfig(runtimeConfig: Record<string, unknown>): void;
122
```
123

124
[Context & Runtime](./context-runtime.md)
125

126
### Auto-Imports System
127

128
Auto-import registration and management for both client-side and server-side code.
129

130
```typescript { .api }
131
function addImports(imports: Import | Import[]): void;
132
function addImportsDir(dirs: string | string[], opts?: { prepend?: boolean }): void;
133
function addServerImports(imports: Import | Import[]): void;
134
```
135

136
[Auto-Imports](./auto-imports.md)
137

138
### Plugin & Template System
139

140
Plugin registration and template generation for virtual file system and TypeScript support.
141

142
```typescript { .api }
143
function addPlugin(plugin: NuxtPlugin | string, opts?: AddPluginOptions): NuxtPlugin;
144
function addTemplate<T>(template: NuxtTemplate<T> | string): ResolvedNuxtTemplate<T>;
145
function addTypeTemplate<T>(template: NuxtTypeTemplate<T>): ResolvedNuxtTemplate<T>;
146
```
147

148
[Plugins & Templates](./plugins-templates.md)
149

150
### Path Resolution & File Utilities
151

152
Path resolution, alias handling, and file discovery with Nuxt-aware logic.
153

154
```typescript { .api }
155
function createResolver(base: string | URL): Resolver;
156
function resolvePath(path: string, opts?: ResolvePathOptions): Promise<string>;
157
function resolveFiles(path: string, pattern: string | string[]): Promise<string[]>;
158
```
159

160
[Path Resolution](./path-resolution.md)
161

162
### Server Integration
163

164
Nitro server handler management, plugin registration, and server-side functionality.
165

166
```typescript { .api }
167
function addServerHandler(handler: NitroEventHandler): void;
168
function addServerPlugin(plugin: string): void;
169
function useNitro(): Nitro;
170
```
171

172
[Server Integration](./server-integration.md)
173

174
### Compatibility Utilities
175

176
Version checking, compatibility validation, and migration support tools.
177

178
```typescript { .api }
179
function getNuxtVersion(nuxt?: Nuxt): string;
180
function checkNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<NuxtCompatibilityIssues>;
181
function assertNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<true>;
182
```
183

184
[Compatibility](./compatibility.md)
185

186
### Development Tools
187

188
Logging, ignore patterns, layer management, and other development utilities.
189

190
```typescript { .api }
191
function useLogger(tag?: string, options?: Partial<ConsolaOptions>): ConsolaInstance;
192
function isIgnored(pathname: string, stats?: unknown, nuxt?: Nuxt): boolean;
193
function getLayerDirectories(nuxt?: Nuxt): LayerDirectories[];
194
```
195

196
[Development Tools](./development-tools.md)