Build documentation sites from Markdown with VitePress, then configure navigation, search, and themes. The skill also covers embedding Vue components, organizing multilingual content, and preparing deployment settings for supported hosting platforms.
VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
Review the instructions the agent will receive before you install.
VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It takes Markdown content, applies a theme, and generates static HTML that becomes an SPA for fast navigation. Perfect for documentation, blogs, and marketing sites.
Key Characteristics:
.md filesBefore working with VitePress projects:
.vitepress/config.ts for site configuration.vitepress/theme/ for custom theme extensionspublic/ directory contains static assets served as-isThe skill is based on VitePress 2.0.0-alpha.20, generated at 2026-09-25.
VitePress 2 notes (v1 → v2): install with vitepress@next; requires Node.js 22+. defineConfigWithTheme is deprecated — use defineConfig<ThemeConfig>. Native RTL support (dir option, CSS logical properties) replaces the old PostCSS-plugin approach. Built-in iconify pipeline (icons config, useIcon/VPIcon, collection:name social icons). New assetsBase (CDN) and assetsShards build options; metaChunk removed. Markdown image.lazyLoading renamed to image.lazyLoad.
| Topic | Description | Reference |
|---|---|---|
| Configuration | Config file setup, defineConfig, site metadata | core-config |
| CLI | Command-line interface: dev, build, preview, init | core-cli |
| Routing | File-based routing, source directory, rewrites | core-routing |
| Markdown | Frontmatter, containers, tables, anchors, includes | core-markdown |
| Topic | Description | Reference |
|---|---|---|
| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | features-code-blocks |
| Vue in Markdown | Components, script setup, directives, templating | features-vue |
| Data Loading | Build-time data loaders, createContentLoader | features-data-loading |
| Dynamic Routes | Generate pages from data, paths loader files | features-dynamic-routes |
| Topic | Description | Reference |
|---|---|---|
| Theme Config | Nav, sidebar, search, social links, footer | theme-config |
| Customization | CSS variables, slots, fonts, global components | theme-customization |
| Custom Theme | Building themes from scratch, theme interface | theme-custom |
| Topic | Description | Reference |
|---|---|---|
| Internationalization | Multi-language sites, locale configuration | advanced-i18n |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | advanced-ssr |
| Topic | Description | Reference |
|---|---|---|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | recipes-deploy |
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Set up JavaScript and TypeScript projects using Anthony Fu’s conventions for code organization, development tools, and package publishing. Establish shared checks for formatting, types, unused code, and tests before committing changes.
Create a GitHub pull request from the current branch with a structured title, a clear explanation of behavior changes, and recorded check results. For UI changes, attach before-and-after screenshots so reviewers can assess the visual differences.
Build and configure web servers with Nitro, including request handlers, caching, storage, and scheduled tasks. The skill also guides deployment to supported runtimes and platforms, plus migration from Nitro v2 to v3.
Develop Vue web applications with Nuxt, covering pages, data fetching, shared state, and server API routes. Configure rendering on the server or in the browser, and prepare deployment settings for supported platforms.
Organize shared data and update logic in Vue apps using Pinia stores, containers for application state. The skill guides store definitions, reactive data access, communication between stores, testing, and integration with Nuxt and server-side rendering.
Manage Node.js dependencies with pnpm, from installing packages to coordinating multiple projects in one workspace. The skill covers shared version settings, third-party package patches, dependency overrides, and consistent installation procedures for automated build environments.