0
# Manifest Generation
1

2
Web app manifest generation with customizable PWA metadata and configuration options for creating standards-compliant manifest files.
3

4
## Capabilities
5

6
### Manifest Generation Function
7

8
Creates and emits web app manifest files with proper PWA metadata.
9

10
```typescript { .api }
11
/**
12
 * Generate web app manifest file
13
 * @param nuxt - Nuxt instance
14
 * @param pwa - PWA context containing manifest configuration
15
 */
16
function manifest(nuxt: any, pwa: PWAContext): void;
17

18
interface ManifestOptions {
19
  /** Application name */
20
  name: string;
21
  /** Short application name for limited space */
22
  short_name: string;
23
  /** Application description */
24
  description: string;
25
  /** Array of icon objects */
26
  icons: Record<string, any>[];
27
  /** URL to load when app is launched */
28
  start_url: string;
29
  /** Display mode (standalone, fullscreen, minimal-ui, browser) */
30
  display: string;
31
  /** Background color for splash screen */
32
  background_color: string;
33
  /** Theme color for browser UI */
34
  theme_color: string;
35
  /** Text direction (ltr or rtl) */
36
  dir: 'ltr' | 'rtl';
37
  /** Primary language */
38
  lang: string;
39
  /** Use .webmanifest extension instead of .json */
40
  useWebmanifestExtension: boolean;
41
  /** Public path for manifest URL */
42
  publicPath: string;
43
  /** Filename pattern for generated manifest */
44
  fileName: string;
45
  /** CORS setting for manifest file */
46
  crossorigin: boolean;
47
}
48
```
49

50
**Usage Example:**
51

52
```typescript
53
// nuxt.config.ts
54
export default {
55
  pwa: {
56
    manifest: {
57
      name: 'My Progressive Web App',
58
      short_name: 'My PWA',
59
      description: 'A modern web application',
60
      start_url: '/?standalone=true',
61
      display: 'standalone',
62
      background_color: '#ffffff',
63
      theme_color: '#2196f3',
64
      lang: 'en',
65
      useWebmanifestExtension: false
66
    }
67
  }
68
}
69
```
70

71
### Manifest Generation Process
72

73
The manifest generation follows these steps:
74

75
1. **Option Merging**: Combines defaults with user configuration
76
2. **Icon Integration**: Includes icons generated by the icon module
77
3. **File Generation**: Creates manifest JSON with proper formatting
78
4. **Asset Emission**: Emits manifest as webpack asset
79
5. **Meta Integration**: Provides manifest meta tag for HTML head
80

81
### Default Configuration
82

83
The module provides sensible defaults for all manifest options:
84

85
```typescript { .api }
86
const defaults: ManifestOptions = {
87
  name: process.env.npm_package_name,
88
  short_name: process.env.npm_package_name,
89
  description: process.env.npm_package_description,
90
  publicPath: /* derived from Nuxt config */,
91
  icons: [],
92
  start_url: /* routerBase + '?standalone=true' */,
93
  display: 'standalone',
94
  background_color: '#ffffff',
95
  theme_color: /* inherited from meta.theme_color */,
96
  lang: 'en',
97
  useWebmanifestExtension: false,
98
  fileName: 'manifest.[hash].[ext]',
99
  dir: undefined,
100
  crossorigin: undefined
101
};
102
```
103

104
### Manifest File Naming
105

106
Dynamic filename generation with content hashing for cache busting.
107

108
```typescript { .api }
109
/**
110
 * Generate manifest filename with hash and extension
111
 * @param options - Manifest options
112
 * @param manifestContent - Serialized manifest content for hashing
113
 * @returns Generated filename
114
 */
115
function generateManifestFileName(
116
  options: ManifestOptions, 
117
  manifestContent: string
118
): string;
119
```
120

121
Filename pattern supports:
122
- `[hash]` - Content hash for cache invalidation
123
- `[ext]` - File extension (json or webmanifest)
124

125
Example: `manifest.abc12345.json`
126

127
### Icon Integration
128

129
Automatically integrates icons generated by the icon module.
130

131
The manifest receives icon data from the icon generation process:
132

133
```json
134
{
135
  "icons": [
136
    {
137
      "src": "/icons/icon_192x192.abc123.png",
138
      "sizes": "192x192",
139
      "type": "image/png",
140
      "purpose": "any maskable"
141
    },
142
    {
143
      "src": "/icons/icon_512x512.abc123.png", 
144
      "sizes": "512x512",
145
      "type": "image/png",
146
      "purpose": "any maskable"
147
    }
148
  ]
149
}
150
```
151

152
### Start URL Configuration
153

154
Configures the app start URL with optional query parameters.
155

156
```typescript { .api }
157
/**
158
 * Default start URL generation
159
 * @param routerBase - Nuxt router base path
160
 * @returns Start URL with standalone parameter
161
 */
162
function generateStartUrl(routerBase: string): string;
163
// Returns: routerBase + '?standalone=true'
164
```
165

166
The `?standalone=true` parameter helps detect PWA installations:
167

168
```javascript
169
// In your app
170
const isStandalone = new URLSearchParams(location.search).has('standalone');
171
```
172

173
### Display Modes
174

175
Supports all standard web app manifest display modes:
176

177
- **`standalone`** - Looks like a native app (default)
178
- **`fullscreen`** - Full screen without browser UI
179
- **`minimal-ui`** - Minimal browser UI
180
- **`browser`** - Regular browser tab
181

182
### Theme Integration
183

184
Automatically inherits theme color from meta module configuration:
185

186
```typescript
187
// Automatic theme color inheritance
188
const options: ManifestOptions = {
189
  theme_color: pwa.meta.theme_color, // Inherited from meta config
190
  // ... other options
191
};
192
```
193

194
### CORS Support
195

196
Optional CORS configuration for manifest files:
197

198
```typescript
199
// nuxt.config.ts
200
export default {
201
  pwa: {
202
    manifest: {
203
      crossorigin: 'use-credentials' // or 'anonymous'
204
    }
205
  }
206
}
207
```
208

209
### Manifest Meta Tag
210

211
Automatically generates the manifest link tag for HTML head:
212

213
```html
214
<link rel="manifest" href="/manifest.abc12345.json" hid="manifest">
215
```
216

217
With CORS support:
218
```html
219
<link rel="manifest" href="/manifest.abc12345.json" crossorigin="use-credentials" hid="manifest">
220
```
221

222
### Asset Emission
223

224
Integrates with Nuxt.js webpack build process for proper asset handling:
225

226
```typescript { .api }
227
/**
228
 * Emit manifest as webpack asset
229
 * @param nuxt - Nuxt instance
230
 * @param fileName - Generated manifest filename
231
 * @param manifestSource - Serialized manifest content
232
 */
233
function emitAsset(nuxt: any, fileName: string, manifestSource: string): void;
234
```
235

236
The manifest is emitted to the appropriate build directory and becomes available at the configured public path.