VuePress is a minimalistic Vue.js-based documentation generator with component layout system and extensive plugin architecture.
—
Core entry point functions for creating and operating VuePress applications.
Creates a VuePress application instance with the provided configuration.
/**
* Creates a VuePress application instance
* @param options - Application configuration options
* @returns App instance for further processing
*/
function createApp(options?: AppOptions): App;
interface AppOptions {
/** Source directory containing markdown files (default: 'docs.fallback' directory) */
sourceDir?: string;
/** Array of plugin configurations */
plugins?: PluginConfig[];
/** Theme name or configuration object */
theme?: string | ThemeConfig;
/** Temporary directory path */
temp?: string;
/** Output directory path for build */
dest?: string;
/** Site configuration object */
siteConfig?: SiteConfig;
}Usage Examples:
const { createApp } = require("vuepress");
// Basic app creation
const app = createApp({
sourceDir: "./docs",
});
// App with plugins and theme
const app = createApp({
sourceDir: "./docs",
plugins: [
["@vuepress/plugin-blog", { /* options */ }],
["@vuepress/plugin-search", { searchMaxSuggestions: 10 }],
],
theme: "@vuepress/theme-default",
dest: "./dist",
});
// Process the app for build or dev
await app.process();Starts a development server with hot module replacement for real-time editing.
/**
* Starts development server with hot module replacement
* @param options - Development server configuration
* @returns Promise resolving to App instance
*/
async function dev(options?: DevOptions): Promise<App>;
interface DevOptions {
/** Source directory containing markdown files */
sourceDir?: string;
/** Array of plugin configurations */
plugins?: PluginConfig[];
/** Theme name or configuration object */
theme?: string | ThemeConfig;
/** Temporary directory path */
temp?: string;
/** Site configuration object */
siteConfig?: SiteConfig;
}Usage Examples:
const { dev } = require("vuepress");
// Start development server
await dev({
sourceDir: "./docs",
theme: "@vuepress/theme-default",
});
// Development with custom configuration
await dev({
sourceDir: "./my-docs",
plugins: [
["@vuepress/plugin-pwa"],
],
siteConfig: {
title: "My Documentation",
description: "A comprehensive guide",
base: "/docs/",
},
});Builds the site for production, generating static HTML files.
/**
* Builds the site for production
* @param options - Build configuration
* @returns Promise resolving to App instance
*/
async function build(options?: BuildOptions): Promise<App>;
interface BuildOptions {
/** Source directory containing markdown files */
sourceDir?: string;
/** Array of plugin configurations */
plugins?: PluginConfig[];
/** Theme name or configuration object */
theme?: string | ThemeConfig;
/** Output directory path (default: sourceDir/.vuepress/dist) */
dest?: string;
/** Temporary directory path */
temp?: string;
/** Site configuration object */
siteConfig?: SiteConfig;
}Usage Examples:
const { build } = require("vuepress");
// Basic production build
await build({
sourceDir: "./docs",
dest: "./dist",
});
// Build with advanced configuration
await build({
sourceDir: "./src",
dest: "./public",
plugins: [
["@vuepress/plugin-google-analytics", { ga: "UA-12345678-1" }],
["@vuepress/plugin-sitemap", { hostname: "https://example.com" }],
],
siteConfig: {
title: "Production Site",
base: "/",
head: [
["link", { rel: "icon", href: "/favicon.ico" }],
],
},
});Ejects the default theme files to the local project for customization.
/**
* Ejects default theme files to local project
* @param dir - Target directory for ejected theme (creates .vuepress/theme subdirectory)
* @returns Promise that resolves when ejection is complete
*/
async function eject(dir: string): Promise<void>;Usage Examples:
const { eject } = require("vuepress");
// Eject default theme to customize
await eject("./docs");
// Creates ./docs/.vuepress/theme with default theme files
// Eject to different directory
await eject("./my-project");
// Creates ./my-project/.vuepress/theme with default theme filesPackage version string for compatibility checking.
/** Package version string from package.json */
const version: string;Usage Examples:
const { version } = require("vuepress");
console.log(`VuePress version: ${version}`);
// Output: VuePress version: 1.9.10
// Version compatibility checking
if (version.startsWith("1.")) {
console.log("Using VuePress v1.x");
}type PluginConfig =
| string
| [string, any]
| Plugin
| [Plugin, any];
interface Plugin {
name?: string;
multiple?: boolean;
plugins?: PluginConfig[];
[optionName: string]: any;
}interface ThemeConfig {
/** Theme entry point path or module name */
path?: string;
/** Theme configuration options */
[key: string]: any;
}Install with Tessl CLI
npx tessl i tessl/npm-vuepress