0
# Component Management
1

2
Component registration, directory scanning, and auto-discovery for Vue components within Nuxt applications. Provides utilities for both manual component registration and automatic discovery.
3

4
## Capabilities
5

6
### Component Registration
7

8
Register individual components with custom names and configuration options.
9

10
```typescript { .api }
11
/**
12
 * Register a component by name and file path
13
 * @param opts - Component registration options
14
 */
15
function addComponent(opts: AddComponentOptions): void;
16

17
interface AddComponentOptions {
18
  /** Component name for usage in templates */
19
  name: string;
20
  /** File path to the component */
21
  filePath: string;
22
  /** Export name if not default export */
23
  export?: string;
24
  /** Make component globally available */
25
  global?: boolean;
26
  /** Component is for development only */
27
  dev?: boolean;
28
  /** Component is for islands */
29
  island?: boolean;
30
  /** Component mode (client, server, all) */
31
  mode?: ComponentMode;
32
  /** Component prefix */
33
  prefix?: string;
34
  /** Component suffix */
35
  suffix?: string;
36
  /** Kebab case the component name */
37
  kebabCase?: boolean;
38
  /** Pascal case the component name */
39
  pascalCase?: boolean;
40
  /** Component priority for name conflicts */
41
  priority?: number;
42
  /** Component metadata */
43
  meta?: Record<string, any>;
44
}
45

46
type ComponentMode = "client" | "server" | "all";
47
```
48

49
**Usage Examples:**
50

51
```typescript
52
import { addComponent } from "@nuxt/kit";
53

54
// Register a global component
55
addComponent({
56
  name: "MyButton",
57
  filePath: "~/components/MyButton.vue",
58
  global: true
59
});
60

61
// Register a client-only component
62
addComponent({
63
  name: "ClientChart",
64
  filePath: "~/components/ClientChart.vue",
65
  mode: "client",
66
  global: false
67
});
68

69
// Register component with specific export
70
addComponent({
71
  name: "SpecialComponent",
72
  filePath: "~/components/exports.ts",
73
  export: "SpecialComponent"
74
});
75
```
76

77
### Component Exports
78

79
Add components from named exports of files or packages.
80

81
```typescript { .api }
82
/**
83
 * Add components from named exports of a file/package
84
 * @param opts - Component exports options
85
 */
86
function addComponentExports(
87
  opts: Omit<AddComponentOptions, 'name'> & { prefix?: string }
88
): void;
89
```
90

91
**Usage Examples:**
92

93
```typescript
94
import { addComponentExports } from "@nuxt/kit";
95

96
// Add all exports from a file
97
addComponentExports({
98
  filePath: "~/components/ui/index.ts",
99
  prefix: "Ui"
100
});
101

102
// Add exports from an npm package
103
addComponentExports({
104
  filePath: "my-component-library",
105
  global: true,
106
  prefix: "Lib"
107
});
108
```
109

110
### Directory Scanning
111

112
Register directories to be automatically scanned for components.
113

114
```typescript { .api }
115
/**
116
 * Register a directory to be scanned for components
117
 * @param dir - Directory configuration or path string
118
 * @param opts - Directory scanning options
119
 */
120
function addComponentsDir(
121
  dir: ComponentsDir,
122
  opts?: { prepend?: boolean }
123
): void;
124

125
interface ComponentsDir {
126
  /** Directory path to scan */
127
  path: string;
128
  /** Pattern to match files (default: **/*.{vue,js,ts,jsx,tsx}) */
129
  pattern?: string | string[];
130
  /** Ignore patterns */
131
  ignore?: string[];
132
  /** Prefix for component names */
133
  prefix?: string;
134
  /** Make all components global */
135
  global?: boolean;
136
  /** Watch directory for changes */
137
  watch?: boolean;
138
  /** Extensions to scan */
139
  extensions?: string[];
140
  /** Component mode for all components */
141
  mode?: ComponentMode;
142
  /** Path prefix to remove from component names */
143
  pathPrefix?: boolean;
144
  /** Enable islands for components */
145
  island?: boolean;
146
  /** Component priority */
147
  priority?: number;
148
  /** Enable transpilation */
149
  transpile?: boolean | "auto";
150
}
151
```
152

153
**Usage Examples:**
154

155
```typescript
156
import { addComponentsDir } from "@nuxt/kit";
157

158
// Add basic components directory
159
addComponentsDir({
160
  path: "~/components/ui",
161
  prefix: "Ui"
162
});
163

164
// Add directory with custom configuration
165
addComponentsDir({
166
  path: "~/components/charts",
167
  pattern: "**/*.chart.vue",
168
  prefix: "Chart",
169
  global: true,
170
  mode: "client",
171
  extensions: [".vue"],
172
  watch: true
173
});
174

175
// Add directory with path prefix removal
176
addComponentsDir({
177
  path: "~/components/form",
178
  pathPrefix: false,
179
  ignore: ["**/internal/**"]
180
});
181

182
// Prepend directory (higher priority)
183
addComponentsDir({
184
  path: "~/components/override",
185
  priority: 10
186
}, { prepend: true });
187
```
188

189
### Component Discovery Patterns
190

191
Examples of component discovery and naming patterns.
192

193
**File Structure to Component Names:**
194

195
```
196
components/
197
├── ui/
198
│   ├── Button.vue          → <UiButton>
199
│   ├── form/
200
│   │   ├── Input.vue       → <UiFormInput>
201
│   │   └── Select.vue      → <UiFormSelect>
202
├── layout/
203
│   ├── Header.vue          → <LayoutHeader>
204
│   └── Footer.vue          → <LayoutFooter>
205
└── MyComponent.vue         → <MyComponent>
206
```
207

208
**Advanced Component Registration:**
209

210
```typescript
211
import { addComponent, addComponentsDir } from "@nuxt/kit";
212

213
// Register components with islands support
214
addComponent({
215
  name: "LazyChart",
216
  filePath: "~/components/LazyChart.vue",
217
  island: true,
218
  mode: "client"
219
});
220

221
// Directory with island components
222
addComponentsDir({
223
  path: "~/components/islands",
224
  island: true,
225
  pattern: "**/*.island.vue",
226
  global: true
227
});
228

229
// Development-only components
230
addComponentsDir({
231
  path: "~/components/dev",
232
  global: true,
233
  // Only available in development
234
  watch: process.env.NODE_ENV === "development"
235
});
236
```
237

238
## Types
239

240
```typescript { .api }
241
interface ComponentMeta {
242
  /** Component is async */
243
  async?: boolean;
244
  /** Component file size */
245
  size?: number;
246
  /** Component dependencies */
247
  deps?: string[];
248
  [key: string]: any;
249
}
250
```