0
# Application Management
1

2
The App class provides comprehensive site orchestration, configuration management, and build coordination for VuePress applications.
3

4
## Capabilities
5

6
### App Class
7

8
Central orchestrator for VuePress applications that manages configuration, plugins, pages, and build processes.
9

10
```javascript { .api }
11
/**
12
 * VuePress application instance
13
 */
14
class App {
15
  /**
16
   * Create a new VuePress application
17
   * @param options - Application configuration options
18
   */
19
  constructor(options?: AppOptions);
20
  
21
  /** Application properties */
22
  readonly isProd: boolean;
23
  readonly options: AppOptions;
24
  readonly sourceDir: string;
25
  readonly vuepressDir: string;
26
  readonly libDir: string;
27
  readonly cwd: string;
28
  readonly siteConfig: SiteConfig;
29
  readonly base: string;
30
  readonly themeConfig: any;
31
  readonly tempPath: string;
32
  readonly outDir: string;
33
  readonly pages: Page[];
34
  readonly pluginAPI: PluginAPI;
35
  readonly markdown: any;
36
}
37
```
38

39
**Usage Examples:**
40

41
```javascript
42
const { createApp } = require("vuepress");
43

44
const app = createApp({
45
  sourceDir: "./docs",
46
  plugins: [["@vuepress/plugin-blog"]],
47
});
48

49
// Access app properties
50
console.log(app.sourceDir); // "./docs"
51
console.log(app.isProd); // false (in development)
52
console.log(app.pages.length); // Number of discovered pages
53
```
54

55
### process Method
56

57
Processes the application configuration, loads plugins, discovers pages, and prepares for build or development.
58

59
```javascript { .api }
60
/**
61
 * Process configuration, plugins, and prepare for build/dev
62
 * This method must be called before dev() or build()
63
 * @returns Promise that resolves when processing is complete
64
 */
65
async process(): Promise<void>;
66
```
67

68
**Usage Examples:**
69

70
```javascript
71
const app = createApp({
72
  sourceDir: "./docs",
73
  plugins: [
74
    ["@vuepress/plugin-last-updated"],
75
    ["@vuepress/plugin-register-components"],
76
  ],
77
});
78

79
// Process the app before using
80
await app.process();
81

82
// Now app.pages is populated with discovered pages
83
console.log(`Found ${app.pages.length} pages`);
84
app.pages.forEach(page => {
85
  console.log(`Page: ${page.path} - ${page.title}`);
86
});
87
```
88

89
### dev Method
90

91
Launches a development server with hot module replacement for real-time editing.
92

93
```javascript { .api }
94
/**
95
 * Launch development server with hot module replacement
96
 * @returns Promise resolving to the App instance
97
 */
98
async dev(): Promise<App>;
99
```
100

101
**Usage Examples:**
102

103
```javascript
104
const app = createApp({
105
  sourceDir: "./docs",
106
  theme: "@vuepress/theme-default",
107
});
108

109
await app.process();
110

111
// Start development server
112
const devApp = await app.dev();
113
// Server starts on http://localhost:8080 (or next available port)
114

115
// The app instance provides access to dev server info
116
console.log("Development server running");
117
```
118

119
### build Method
120

121
Builds the static site for production deployment.
122

123
```javascript { .api }
124
/**
125
 * Build static site for production
126
 * @returns Promise resolving to the App instance
127
 */
128
async build(): Promise<App>;
129
```
130

131
**Usage Examples:**
132

133
```javascript
134
const app = createApp({
135
  sourceDir: "./docs",
136
  dest: "./dist",
137
  siteConfig: {
138
    title: "My Documentation",
139
    base: "/docs/",
140
  },
141
});
142

143
await app.process();
144

145
// Build for production
146
const builtApp = await app.build();
147
// Static files generated in ./dist directory
148

149
console.log(`Built ${app.pages.length} pages to ${app.outDir}`);
150
```
151

152
### addPage Method
153

154
Dynamically adds a page to the application during processing.
155

156
```javascript { .api }
157
/**
158
 * Add a page to the application
159
 * @param options - Page configuration options
160
 * @returns Promise that resolves when page is processed
161
 */
162
async addPage(options: PageOptions): Promise<void>;
163

164
interface PageOptions {
165
  /** Absolute file path of source file */
166
  filePath?: string;
167
  /** Relative path from source directory */
168
  relative?: string;
169
  /** URL path for the page */
170
  path?: string;
171
  /** Page title */
172
  title?: string;
173
  /** Markdown content */
174
  content?: string;
175
  /** Frontmatter data */
176
  frontmatter?: any;
177
  /** Permalink pattern */
178
  permalinkPattern?: string;
179
}
180
```
181

182
**Usage Examples:**
183

184
```javascript
185
// Add page from file
186
await app.addPage({
187
  filePath: "/absolute/path/to/file.md",
188
  relative: "guide/advanced.md",
189
});
190

191
// Add virtual page with content
192
await app.addPage({
193
  path: "/api/",
194
  title: "API Reference",
195
  content: "# API Reference\n\nGenerated API documentation...",
196
  frontmatter: {
197
    layout: "ApiLayout",
198
    sidebar: false,
199
  },
200
});
201

202
// Add page with custom permalink
203
await app.addPage({
204
  filePath: "/path/to/blog-post.md",
205
  permalinkPattern: "/blog/:year/:month/:day/:slug.html",
206
});
207
```
208

209
### getSiteData Method
210

211
Gets the site metadata that will be delivered to the client-side application.
212

213
```javascript { .api }
214
/**
215
 * Get site data for client-side application
216
 * @returns Site metadata object
217
 */
218
getSiteData(): SiteData;
219

220
interface SiteData {
221
  /** Site title */
222
  title: string;
223
  /** Site description */
224
  description: string;
225
  /** Base URL path */
226
  base: string;
227
  /** HTML head tags */
228
  headTags: HeadTag[];
229
  /** Array of page metadata */
230
  pages: PageData[];
231
  /** Theme configuration */
232
  themeConfig: any;
233
  /** Locale configuration */
234
  locales?: LocaleConfig;
235
}
236
```
237

238
**Usage Examples:**
239

240
```javascript
241
await app.process();
242

243
const siteData = app.getSiteData();
244

245
console.log(`Site: ${siteData.title}`);
246
console.log(`Description: ${siteData.description}`);
247
console.log(`Base URL: ${siteData.base}`);
248
console.log(`Pages: ${siteData.pages.length}`);
249

250
// Access page data
251
siteData.pages.forEach(page => {
252
  console.log(`${page.path}: ${page.title}`);
253
});
254
```
255

256
### getLibFilePath Method
257

258
Gets the path to a file within the core library directory.
259

260
```javascript { .api }
261
/**
262
 * Get file path within core library
263
 * @param relative - Relative path within lib directory
264
 * @returns Absolute path to library file
265
 */
266
getLibFilePath(relative: string): string;
267
```
268

269
**Usage Examples:**
270

271
```javascript
272
// Get path to client components
273
const clientPath = app.getLibFilePath("client/components/Content.js");
274

275
// Get path to webpack config
276
const webpackPath = app.getLibFilePath("node/webpack/createBaseConfig.js");
277

278
// Get path to templates
279
const templatePath = app.getLibFilePath("client/index.dev.html");
280

281
console.log(clientPath); // /path/to/vuepress/lib/client/components/Content.js
282
```
283

284
## Configuration Types
285

286
### AppOptions
287

288
```javascript { .api }
289
interface AppOptions {
290
  /** Source directory containing markdown files */
291
  sourceDir?: string;
292
  /** Array of plugin configurations */
293
  plugins?: PluginConfig[];
294
  /** Theme name or configuration object */
295
  theme?: string | ThemeConfig;
296
  /** Temporary directory path */
297
  temp?: string;
298
  /** Output directory path for build */
299
  dest?: string;
300
  /** Site configuration object */
301
  siteConfig?: SiteConfig;
302
}
303
```
304

305
### SiteConfig
306

307
```javascript { .api }
308
interface SiteConfig {
309
  /** Site title */
310
  title?: string;
311
  /** Site description */
312
  description?: string;
313
  /** Base URL path */
314
  base?: string;
315
  /** HTML head tags */
316
  head?: HeadTag[];
317
  /** Theme configuration */
318
  themeConfig?: any;
319
  /** Markdown configuration */
320
  markdown?: MarkdownConfig;
321
  /** File patterns to include */
322
  patterns?: string[];
323
  /** Permalink pattern */
324
  permalink?: string;
325
  /** Locale configuration */
326
  locales?: LocaleConfig;
327
  /** Temporary directory */
328
  temp?: string;
329
  /** Output directory */
330
  dest?: string;
331
}
332
```