0
# Performance & Optimization
1

2
Advanced performance optimization APIs for component preloading, payload management, and app manifest handling.
3

4
## Capabilities
5

6
### Component Preloading
7

8
Preload and prefetch components for better performance and user experience.
9

10
```typescript { .api }
11
/**
12
 * Preload components to make them available immediately
13
 * @param components - Component names or array of component names to preload
14
 * @returns Promise that resolves when components are preloaded
15
 */
16
function preloadComponents(components: string | string[]): Promise<void>;
17

18
/**
19
 * Prefetch components for future use with lower priority
20
 * @param components - Component names or array of component names to prefetch
21
 * @returns Promise that resolves when components are prefetched
22
 */
23
function prefetchComponents(components: string | string[]): Promise<void>;
24

25
/**
26
 * Preload all components for a specific route
27
 * @param to - Route location to preload components for
28
 * @param router - Router instance (optional)
29
 * @returns Promise that resolves when route components are preloaded
30
 */
31
function preloadRouteComponents(
32
  to: RouteLocationRaw,
33
  router?: Router
34
): Promise<void>;
35
```
36

37
**Usage Examples:**
38

39
```typescript
40
import { 
41
  preloadComponents, 
42
  prefetchComponents, 
43
  preloadRouteComponents 
44
} from "nuxt/app";
45

46
// Preload critical components immediately
47
await preloadComponents(['UserProfile', 'Dashboard']);
48

49
// Prefetch components for future use
50
prefetchComponents(['Settings', 'Reports']);
51

52
// Preload all components for a route
53
await preloadRouteComponents('/user/profile');
54
```
55

56
### Payload Management
57

58
Advanced payload handling for optimization and custom data serialization.
59

60
```typescript { .api }
61
/**
62
 * Load payload data for a specific URL
63
 * @param url - URL to load payload for
64
 * @param opts - Loading options
65
 * @returns Promise resolving to payload data
66
 */
67
function loadPayload<T = Record<string, any>>(
68
  url: string,
69
  opts?: LoadPayloadOptions
70
): Promise<T | null>;
71

72
/**
73
 * Preload payload data for a URL without navigation
74
 * @param url - URL to preload payload for
75
 * @param opts - Preload options  
76
 * @returns Promise that resolves when payload is preloaded
77
 */
78
function preloadPayload(
79
  url: string,
80
  opts?: PreloadPayloadOptions
81
): Promise<void>;
82

83
/**
84
 * Define a payload reducer for custom data serialization
85
 * @param name - Reducer name
86
 * @param reducer - Function to transform data during serialization
87
 */
88
function definePayloadReducer<T>(
89
  name: string,
90
  reducer: (data: T) => any
91
): void;
92

93
/**
94
 * Define a payload reviver for custom data deserialization
95
 * @param name - Reviver name
96
 * @param reviver - Function to restore data during deserialization
97
 */
98
function definePayloadReviver<T>(
99
  name: string,
100
  reviver: (data: any) => T
101
): void;
102

103
/**
104
 * Check if a route is prerendered (static)
105
 * @param url - URL to check (optional, defaults to current route)
106
 * @returns Promise resolving to true if route is prerendered
107
 */
108
function isPrerendered(url?: string): Promise<boolean>;
109
```
110

111
**Usage Examples:**
112

113
```typescript
114
import { 
115
  loadPayload, 
116
  preloadPayload, 
117
  definePayloadReducer,
118
  definePayloadReviver,
119
  isPrerendered 
120
} from "nuxt/app";
121

122
// Load payload for a specific page
123
const userData = await loadPayload('/user/123');
124

125
// Preload payload on hover
126
async function onUserHover() {
127
  await preloadPayload('/user/profile');
128
}
129

130
// Custom date serialization
131
definePayloadReducer('date', (date: Date) => date.toISOString());
132
definePayloadReviver('date', (dateString: string) => new Date(dateString));
133

134
// Check if current route is prerendered
135
const isStatic = await isPrerendered();
136
```
137

138
### App Manifest & Route Rules
139

140
Access application manifest and route-specific configuration for advanced optimizations.
141

142
```typescript { .api }
143
/**
144
 * Get the application manifest with metadata and route information
145
 * @returns Promise resolving to the app manifest
146
 */
147
function getAppManifest(): Promise<NuxtAppManifest>;
148

149
/**
150
 * Get route-specific rules and configuration
151
 * @param path - Route path to get rules for
152
 * @returns Promise resolving to route rules
153
 */
154
function getRouteRules(path: string): Promise<NitroRouteRules>;
155
```
156

157
**Usage Examples:**
158

159
```typescript
160
import { getAppManifest, getRouteRules } from "nuxt/app";
161

162
// Get app manifest
163
const manifest = await getAppManifest();
164
console.log('Available routes:', manifest.routes);
165

166
// Get route-specific rules
167
const rules = await getRouteRules('/api/users');
168
console.log('Route config:', rules);
169
```
170

171
### Custom Link Components
172

173
Define custom link components with enhanced functionality.
174

175
```typescript { .api }
176
/**
177
 * Define a custom Nuxt link component with extended functionality
178
 * @param options - Link component configuration
179
 * @returns Vue component definition
180
 */
181
function defineNuxtLink<T extends Record<string, any>>(
182
  options: NuxtLinkOptions<T>
183
): Component;
184

185
interface NuxtLinkOptions<T> {
186
  componentName?: string;
187
  externalRelAttribute?: string;
188
  activeClass?: string;
189
  exactActiveClass?: string;
190
  prefetchedClass?: string;
191
  trailingSlash?: 'append' | 'remove';
192
}
193
```
194

195
**Usage Example:**
196

197
```typescript
198
import { defineNuxtLink } from "nuxt/app";
199

200
// Define custom link with specific behavior
201
const CustomLink = defineNuxtLink({
202
  componentName: 'AppLink',
203
  activeClass: 'app-link--active',
204
  prefetchedClass: 'app-link--prefetched',
205
  trailingSlash: 'remove'
206
});
207
```
208

209
## Types
210

211
```typescript { .api }
212
interface LoadPayloadOptions {
213
  fresh?: boolean;
214
  hash?: string;
215
}
216

217
interface PreloadPayloadOptions {
218
  hash?: string;
219
}
220

221
interface NuxtAppManifest {
222
  id: string;
223
  timestamp: number;
224
  routes: Record<string, {
225
    id: string;
226
    file: string;
227
    children?: string[];
228
  }>;
229
  prerendered?: string[];
230
}
231

232
interface NitroRouteRules {
233
  cors?: boolean;
234
  headers?: Record<string, string>;
235
  redirect?: string | {
236
    to: string;
237
    statusCode?: number;
238
  };
239
  prerender?: boolean;
240
  index?: boolean;
241
  robots?: boolean;
242
  sitemap?: boolean;
243
  experimentalNoScripts?: boolean;
244
}
245

246
interface NuxtLinkOptions<T> {
247
  /** Name for the custom link component */
248
  componentName?: string;
249
  /** Rel attribute for external links */
250
  externalRelAttribute?: string;
251
  /** CSS class for active links */
252
  activeClass?: string;
253
  /** CSS class for exact active links */
254
  exactActiveClass?: string;
255
  /** CSS class for prefetched links */
256
  prefetchedClass?: string;
257
  /** Trailing slash behavior */
258
  trailingSlash?: 'append' | 'remove';
259
}
260

261
type RouteLocationRaw = string | {
262
  name?: string;
263
  path?: string;
264
  params?: Record<string, any>;
265
  query?: Record<string, any>;
266
  hash?: string;
267
};
268
```