0
# Build System Integration
1

2
Build plugin and configuration management for multiple bundlers including Vite, Webpack, and Rspack. Provides unified APIs for extending build configurations across different bundlers.
3

4
## Capabilities
5

6
### Cross-Bundler Plugin Management
7

8
Add plugins that work across multiple bundlers with automatic detection and configuration.
9

10
```typescript { .api }
11
/**
12
 * Add build plugins for multiple bundlers (Vite/Webpack/Rspack)
13
 * @param pluginFactory - Factory function that returns bundler-specific plugins
14
 * @param options - Configuration options for plugin application
15
 */
16
function addBuildPlugin(
17
  pluginFactory: AddBuildPluginFactory,
18
  options?: ExtendConfigOptions
19
): void;
20

21
interface AddBuildPluginFactory {
22
  vite?: () => VitePlugin | VitePlugin[];
23
  webpack?: () => WebpackPluginInstance | WebpackPluginInstance[];
24
  rspack?: () => RspackPluginInstance | RspackPluginInstance[];
25
}
26

27
interface ExtendConfigOptions {
28
  /** Apply to development builds */
29
  dev?: boolean;
30
  /** Apply to production builds */
31
  build?: boolean;
32
  /** Apply to server builds */
33
  server?: boolean;
34
  /** Apply to client builds */
35
  client?: boolean;
36
}
37
```
38

39
**Usage Examples:**
40

41
```typescript
42
import { addBuildPlugin } from "@nuxt/kit";
43

44
// Add plugin for all bundlers
45
addBuildPlugin({
46
  vite: () => myVitePlugin(),
47
  webpack: () => new MyWebpackPlugin(),
48
  rspack: () => new MyRspackPlugin()
49
}, {
50
  dev: true,
51
  build: true
52
});
53
```
54

55
### Vite Integration
56

57
Add Vite-specific plugins and extend Vite configuration.
58

59
```typescript { .api }
60
/**
61
 * Add Vite plugin to configuration
62
 * @param pluginOrGetter - Vite plugin(s) or function returning plugin(s)
63
 * @param options - Options for plugin application
64
 */
65
function addVitePlugin(
66
  pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]),
67
  options?: ExtendViteConfigOptions
68
): void;
69

70
/**
71
 * Extend Vite configuration
72
 * @param fn - Function to modify Vite config
73
 * @param options - Options for config extension
74
 */
75
function extendViteConfig(
76
  fn: (config: ViteConfig) => void,
77
  options?: ExtendViteConfigOptions
78
): void;
79

80
interface ExtendViteConfigOptions extends ExtendConfigOptions {
81
  /** Vite environment (client, server, dev, build) */
82
  environment?: string;
83
}
84

85
interface ViteConfig {
86
  plugins?: VitePlugin[];
87
  resolve?: ResolveOptions;
88
  define?: Record<string, any>;
89
  css?: CSSOptions;
90
  [key: string]: any;
91
}
92

93
interface VitePlugin {
94
  name: string;
95
  [key: string]: any;
96
}
97
```
98

99
**Usage Examples:**
100

101
```typescript
102
import { addVitePlugin, extendViteConfig } from "@nuxt/kit";
103
import { defineConfig } from "vite";
104

105
// Add Vite plugin
106
addVitePlugin(() => ({
107
  name: "my-vite-plugin",
108
  configResolved(config) {
109
    // Plugin logic
110
  }
111
}), {
112
  dev: true,
113
  client: true
114
});
115

116
// Extend Vite configuration
117
extendViteConfig((config) => {
118
  config.define = config.define || {};
119
  config.define.MY_CONSTANT = JSON.stringify("value");
120
  
121
  config.resolve = config.resolve || {};
122
  config.resolve.alias = {
123
    ...config.resolve.alias,
124
    "@custom": "/path/to/custom"
125
  };
126
});
127
```
128

129
### Webpack Integration
130

131
Add Webpack-specific plugins and extend Webpack configuration.
132

133
```typescript { .api }
134
/**
135
 * Add Webpack plugin to configuration
136
 * @param pluginOrGetter - Webpack plugin(s) or function returning plugin(s)
137
 * @param options - Options for plugin application
138
 */
139
function addWebpackPlugin(
140
  pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]),
141
  options?: ExtendWebpackConfigOptions
142
): void;
143

144
/**
145
 * Extend Webpack configuration
146
 * @param fn - Function to modify Webpack config
147
 * @param options - Options for config extension
148
 */
149
function extendWebpackConfig(
150
  fn: (config: WebpackConfig) => void,
151
  options?: ExtendWebpackConfigOptions
152
): void;
153

154
interface ExtendWebpackConfigOptions extends ExtendConfigOptions {
155
  /** Webpack mode (development, production) */
156
  mode?: string;
157
}
158

159
interface WebpackConfig {
160
  plugins?: WebpackPluginInstance[];
161
  resolve?: WebpackResolveOptions;
162
  module?: WebpackModuleOptions;
163
  optimization?: WebpackOptimizationOptions;
164
  [key: string]: any;
165
}
166

167
interface WebpackPluginInstance {
168
  apply(compiler: any): void;
169
  [key: string]: any;
170
}
171
```
172

173
**Usage Examples:**
174

175
```typescript
176
import { addWebpackPlugin, extendWebpackConfig } from "@nuxt/kit";
177
import webpack from "webpack";
178

179
// Add Webpack plugin
180
addWebpackPlugin(() => new webpack.DefinePlugin({
181
  MY_CONSTANT: JSON.stringify("value")
182
}), {
183
  build: true
184
});
185

186
// Extend Webpack configuration
187
extendWebpackConfig((config) => {
188
  config.resolve = config.resolve || {};
189
  config.resolve.alias = {
190
    ...config.resolve.alias,
191
    "@custom": "/path/to/custom"
192
  };
193
  
194
  config.module = config.module || {};
195
  config.module.rules = config.module.rules || [];
196
  config.module.rules.push({
197
    test: /\.custom$/,
198
    use: "custom-loader"
199
  });
200
});
201
```
202

203
### Rspack Integration
204

205
Add Rspack-specific plugins and extend Rspack configuration.
206

207
```typescript { .api }
208
/**
209
 * Add Rspack plugin to configuration
210
 * @param pluginOrGetter - Rspack plugin(s) or function returning plugin(s)
211
 * @param options - Options for plugin application
212
 */
213
function addRspackPlugin(
214
  pluginOrGetter: RspackPluginInstance | RspackPluginInstance[] | (() => RspackPluginInstance | RspackPluginInstance[]),
215
  options?: ExtendWebpackConfigOptions
216
): void;
217

218
/**
219
 * Extend Rspack configuration
220
 * @param fn - Function to modify Rspack config
221
 * @param options - Options for config extension
222
 */
223
function extendRspackConfig(
224
  fn: (config: WebpackConfig) => void,
225
  options?: ExtendWebpackConfigOptions
226
): void;
227

228
interface RspackPluginInstance {
229
  apply(compiler: any): void;
230
  [key: string]: any;
231
}
232
```
233

234
**Usage Examples:**
235

236
```typescript
237
import { addRspackPlugin, extendRspackConfig } from "@nuxt/kit";
238

239
// Add Rspack plugin
240
addRspackPlugin(() => ({
241
  apply(compiler) {
242
    // Plugin logic
243
  }
244
}), {
245
  build: true
246
});
247

248
// Extend Rspack configuration
249
extendRspackConfig((config) => {
250
  config.optimization = config.optimization || {};
251
  config.optimization.minimize = true;
252
});
253
```
254

255
## Types
256

257
```typescript { .api }
258
interface ResolveOptions {
259
  alias?: Record<string, string>;
260
  extensions?: string[];
261
  [key: string]: any;
262
}
263

264
interface CSSOptions {
265
  preprocessorOptions?: Record<string, any>;
266
  postcss?: any;
267
  [key: string]: any;
268
}
269

270
interface WebpackResolveOptions {
271
  alias?: Record<string, string>;
272
  extensions?: string[];
273
  modules?: string[];
274
  [key: string]: any;
275
}
276

277
interface WebpackModuleOptions {
278
  rules?: any[];
279
  [key: string]: any;
280
}
281

282
interface WebpackOptimizationOptions {
283
  minimize?: boolean;
284
  splitChunks?: any;
285
  [key: string]: any;
286
}
287
```