tessl/npm-vuepress
VuePress is a minimalistic Vue.js-based documentation generator with component layout system and extensive plugin architecture.
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-vuepress@1.9.0index.mddocs/
VuePress
VuePress is a minimalistic Vue.js-based documentation generator that provides comprehensive functionality for building and serving documentation sites. It features Vue component-based layout systems, markdown processing with custom containers, theming, and an extensive plugin architecture for creating rich, interactive documentation.
Package Information
- Package Name: vuepress
- Package Type: npm
- Language: JavaScript/TypeScript
- Installation:
npm install vuepress
Core Imports
const { createApp, dev, build, eject, version } = require("vuepress");For ES modules:
import { createApp, dev, build, eject, version } from "vuepress";Basic Usage
const { createApp, dev, build } = require("vuepress");
// Create a VuePress application
const app = createApp({
sourceDir: "./docs",
plugins: [
["@vuepress/plugin-blog"],
],
themeConfig: {
nav: [
{ text: "Home", link: "/" },
{ text: "Guide", link: "/guide/" },
],
},
});
// Development server
async function startDev() {
await dev({
sourceDir: "./docs",
theme: "@vuepress/theme-default",
});
}
// Production build
async function buildSite() {
await build({
sourceDir: "./docs",
dest: "./dist",
});
}Architecture
VuePress is built around several key components:
- App Class: Central orchestrator managing configuration, pages, plugins, and build processes
- Plugin System: Extensible architecture with hooks for customizing build, markdown processing, and client behavior
- Page Management: Automatic discovery and processing of markdown and Vue files into routable pages
- Build Pipeline: Webpack-driven development and production build processes with hot module replacement
- Theme Integration: Flexible theming system with component-based layouts and styling
- CLI Interface: Command-line interface for development and build operations
- DevProcess/BuildProcess: Specialized process management for development server and production builds
Capabilities
Core API Functions
Main entry point functions for creating and operating VuePress applications.
/**
* Creates a VuePress application instance
* @param options - Application configuration options
* @returns App instance
*/
function createApp(options: AppOptions): App;
/**
* Starts development server with hot module replacement
* @param options - Development server configuration
* @returns Promise resolving to App instance
*/
function dev(options: DevOptions): Promise<App>;
/**
* Builds the site for production
* @param options - Build configuration
* @returns Promise resolving to App instance
*/
function build(options: BuildOptions): Promise<App>;
/**
* Ejects default theme files to local project
* @param dir - Target directory for ejected theme
* @returns Promise
*/
function eject(dir: string): Promise<void>;
/** Package version string */
const version: string;Application Management
App class providing comprehensive site orchestration, configuration management, and build coordination.
class App {
constructor(options: AppOptions);
/** Process configuration, plugins, and prepare for build/dev */
process(): Promise<void>;
/** Launch development server */
dev(): Promise<App>;
/** Build static site */
build(): Promise<App>;
/** Add page to site */
addPage(options: PageOptions): Promise<void>;
/** Get site data for client */
getSiteData(): SiteData;
/** Get file path within core library */
getLibFilePath(relative: string): string;
}Plugin System
Comprehensive plugin architecture with hooks for customizing every aspect of the build process.
class PluginAPI {
/** Register a plugin */
use(pluginRaw: string | Plugin, pluginOptions?: any): PluginAPI;
/** Initialize all registered plugins */
initialize(): void;
/** Apply synchronous plugin option */
applySyncOption(name: string, ...args: any[]): PluginAPI;
/** Apply asynchronous plugin option */
applyAsyncOption(name: string, ...args: any[]): Promise<void>;
}Page Management
Page class representing individual documents with frontmatter processing, header extraction, and permalink generation.
class Page {
constructor(options: PageOptions, context: App);
/** Process page content and metadata */
process(options: ProcessOptions): Promise<void>;
/** Serialize page metadata for client */
toJson(): object;
/** Page properties */
readonly title: string;
readonly path: string;
readonly frontmatter: object;
readonly headers: Header[];
}Build Processes
DevProcess and BuildProcess classes providing specialized process management for development server and production builds.
class DevProcess {
constructor(context: App);
/** Prepare development server configuration */
process(): Promise<DevProcess>;
/** Create webpack dev server instance */
createServer(): DevProcess;
/** Start the development server */
listen(callback?: () => void): DevProcess;
}
class BuildProcess {
constructor(context: App);
/** Prepare build configuration */
process(): Promise<void>;
/** Compile and render all pages */
render(): Promise<void>;
}Types and Configuration
Common types and interfaces used throughout the VuePress API.
interface AppOptions {
sourceDir?: string;
plugins?: PluginConfig[];
theme?: string | ThemeConfig;
temp?: string;
dest?: string;
siteConfig?: SiteConfig;
}
interface SiteConfig {
title?: string;
description?: string;
base?: string;
head?: HeadTag[];
themeConfig?: any;
markdown?: MarkdownConfig;
patterns?: string[];
}