0
# Manifest Generation
1

2
Client and server manifest generation for optimal asset loading and bundle resolution in both development and production environments.
3

4
## Capabilities
5

6
### Write Manifest Function
7

8
Generates and writes client and server manifests for bundle resolution and optimal asset loading.
9

10
```typescript { .api }
11
/**
12
 * Write client and server manifests for bundle resolution
13
 * Creates manifests for optimal asset loading and bundle resolution
14
 * @param ctx - Vite build context containing build information
15
 */
16
function writeManifest(ctx: ViteBuildContext): Promise<void>;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import { writeManifest } from "@nuxt/vite-builder/manifest";
23
import type { ViteBuildContext } from "@nuxt/vite-builder";
24

25
// Called automatically after server build completion
26
await writeManifest(ctx);
27

28
// Generates:
29
// - Client manifest for asset resolution
30
// - Server manifest for SSR bundle loading
31
// - Development manifests for hot reloading
32
```
33

34
### Client Manifest Structure
35

36
Client-side manifest for browser asset loading and module resolution.
37

38
```typescript { .api }
39
/**
40
 * Client manifest structure for asset resolution
41
 * Maps module IDs to their corresponding assets and metadata
42
 */
43
interface ClientManifest {
44
  [moduleId: string]: {
45
    /** Whether this is an entry point module */
46
    isEntry: boolean;
47
    /** File path relative to build output */
48
    file: string;
49
    /** Associated CSS files */
50
    css?: string[];
51
    /** Associated asset files */
52
    assets?: string[];
53
    /** Whether module uses ES modules */
54
    module?: boolean;
55
    /** Resource type (script, style, etc.) */
56
    resourceType: 'script' | 'style' | 'font' | 'image';
57
  };
58
}
59
```
60

61
**Client Manifest Features:**
62

63
- **Module Mapping**: Maps module IDs to their built assets
64
- **CSS Association**: Links modules to their associated CSS files
65
- **Asset Tracking**: Tracks all assets associated with each module
66
- **Entry Point Detection**: Identifies application entry points
67
- **Resource Type Classification**: Categorizes resources for optimal loading
68

69
### Development Manifest
70

71
Special manifest structure for development mode with hot module replacement support.
72

73
```typescript { .api }
74
/**
75
 * Development client manifest for HMR support
76
 * Simplified manifest structure for development builds
77
 */
78
interface DevClientManifest {
79
  '@vite/client': {
80
    isEntry: true;
81
    file: '@vite/client';
82
    css: string[];
83
    module: true;
84
    resourceType: 'script';
85
  };
86
  [entryPath: string]: {
87
    isEntry: true;
88
    file: string;
89
    module: true;
90
    resourceType: 'script';
91
  };
92
}
93
```
94

95
**Development Features:**
96

97
- **Vite Client Integration**: Includes Vite's HMR client
98
- **Simplified Structure**: Reduced complexity for faster development
99
- **Hot Updates**: Supports hot module replacement
100
- **Dynamic Loading**: Enables dynamic module loading during development
101

102
### Production Manifest
103

104
Optimized manifest for production builds with asset fingerprinting and optimization.
105

106
```typescript
107
// Production manifest example
108
{
109
  "entry": {
110
    "isEntry": true,
111
    "file": "entry.a1b2c3d4.js",
112
    "css": ["assets/entry.e5f6g7h8.css"],
113
    "assets": ["assets/logo.i9j0k1l2.png"],
114
    "module": true,
115
    "resourceType": "script"
116
  },
117
  "components/Header.vue": {
118
    "isEntry": false,
119
    "file": "assets/Header.m3n4o5p6.js",
120
    "css": ["assets/Header.q7r8s9t0.css"],
121
    "module": true,
122
    "resourceType": "script"
123
  }
124
}
125
```
126

127
### Asset Path Processing
128

129
Sophisticated asset path processing for different deployment environments.
130

131
```typescript { .api }
132
/**
133
 * Asset path processing configuration
134
 */
135
interface AssetPathConfig {
136
  /** Build assets directory */
137
  buildAssetsDir: string;
138
  /** Base URL for assets */
139
  baseURL: string;
140
  /** Whether to use relative paths */
141
  relative?: boolean;
142
}
143
```
144

145
**Path Processing Features:**
146

147
- **Relative Path Conversion**: Converts absolute paths to relative when needed
148
- **Base URL Integration**: Applies base URL prefixes for CDN deployment
149
- **Asset Directory Mapping**: Maps assets to their final deployment paths
150
- **Cross-platform Compatibility**: Ensures paths work across different platforms
151

152
### Manifest Normalization
153

154
Normalizes Vite's raw manifest format for use with vue-bundle-renderer.
155

156
```typescript { .api }
157
/**
158
 * Normalize Vite manifest for vue-bundle-renderer
159
 * Converts Vite's manifest format to vue-bundle-renderer format
160
 * @param manifest - Raw Vite manifest
161
 * @returns Normalized manifest for rendering
162
 */
163
function normalizeViteManifest(manifest: ViteClientManifest): RendererManifest;
164

165
/**
166
 * Vue bundle renderer manifest format
167
 */
168
interface RendererManifest {
169
  [moduleId: string]: {
170
    isEntry: boolean;
171
    file: string;
172
    css: string[];
173
    assets?: string[];
174
    module?: boolean;
175
    resourceType: string;
176
  };
177
}
178
```
179

180
### Build Directory Management
181

182
Manages manifest files across different build directories and environments.
183

184
**Directory Structure:**
185

186
```
187
.nuxt/
188
├── dist/
189
│   ├── client/
190
│   │   ├── manifest.json      # Client manifest
191
│   │   ├── entry.js           # Entry point
192
│   │   └── assets/            # Static assets
193
│   └── server/
194
│       ├── server.mjs         # Server entry
195
│       └── manifest.json      # Server manifest (if needed)
196
```
197

198
### SSR Manifest Integration
199

200
Special handling for server-side rendering manifest requirements.
201

202
```typescript { .api }
203
/**
204
 * SSR manifest configuration
205
 */
206
interface SSRManifestConfig {
207
  /** Whether SSR is enabled */
208
  ssr: boolean;
209
  /** Server manifest path */
210
  serverManifest?: string;
211
  /** Client manifest path */
212
  clientManifest: string;
213
}
214
```
215

216
**SSR Features:**
217

218
- **Client/Server Coordination**: Ensures client and server manifests are compatible
219
- **Hydration Support**: Provides information needed for proper hydration
220
- **Route-based Splitting**: Supports route-based code splitting in SSR
221
- **Performance Optimization**: Optimizes manifest size for SSR scenarios
222

223
### Asset Optimization
224

225
Advanced asset handling and optimization within manifest generation.
226

227
**Optimization Features:**
228

229
- **Fingerprinting**: Adds content hashes to asset filenames
230
- **Compression**: Identifies compressed asset variants
231
- **Preloading**: Marks critical assets for preloading
232
- **Lazy Loading**: Identifies assets suitable for lazy loading
233

234
### Manifest Utilities
235

236
Utility functions for working with manifests in different contexts.
237

238
```typescript { .api }
239
/**
240
 * Sanitize file path for cross-platform compatibility
241
 * @param path - File path to sanitize
242
 * @returns Sanitized file path
243
 */
244
function sanitizeFilePath(path: string): string;
245

246
/**
247
 * Get filename from path without extension
248
 * @param path - File path
249
 * @returns Filename without extension
250
 */
251
function filename(path: string): string;
252

253
/**
254
 * Resolve asset file names with hash patterns
255
 * @param chunk - Rollup chunk information
256
 * @returns Formatted asset filename
257
 */
258
function resolveAssetFileName(chunk: RenderedChunk): string;
259
```
260

261
### Error Handling
262

263
Comprehensive error handling for manifest generation failures.
264

265
**Error Scenarios:**
266

267
- **File System Errors**: Handles manifest write failures
268
- **Path Resolution Errors**: Manages invalid asset path references
269
- **Format Validation**: Ensures manifest format correctness
270
- **Dependency Tracking**: Handles missing asset dependencies
271

272
### Development vs Production
273

274
Manifest generation adapts to different build modes with appropriate optimizations.
275

276
**Development Mode:**
277
- Simplified manifest structure
278
- Real-time manifest updates
279
- HMR integration
280
- Fast generation for better DX
281

282
**Production Mode:**
283
- Optimized manifest structure
284
- Asset fingerprinting
285
- Compression information
286
- Performance-focused generation
287

288
### Integration with Vue Bundle Renderer
289

290
Seamless integration with vue-bundle-renderer for optimal SSR performance.
291

292
**Integration Features:**
293

294
- **Format Compatibility**: Ensures manifest format works with vue-bundle-renderer
295
- **Performance Optimization**: Optimizes manifest structure for rendering performance
296
- **Caching Support**: Provides information for effective caching strategies
297
- **Preload Generation**: Generates preload hints for critical resources