Vitepress
Anthony FuCommunityCreated by Anthony Fu
- Skill
- Tool integration
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
VitePress is a static site generator that transforms Markdown content into a single-page application. It leverages Vite for build processes and Vue 3 for component-based content, allowing developers to integrate Vue components directly into Markdown files. The tool supports file-based routing, theme customization, and provides built-in features for search, internationalization, and server-side rendering compatibility.
What it does
- Generates static HTML from Markdown files
- Enables the use of Vue components within Markdown
- Supports file-based routing and site configuration
- Provides tools for internationalization and multi-language sites
- Offers mechanisms for SSR-compatible code and browser-only component handling
- Includes built-in search and theme customization options
When to use it
- When building documentation sites or technical guides
- When creating blogs or marketing sites using Markdown
- When you need to embed interactive Vue components in static content
- When you require a site with multi-language support
Advantages
- Direct integration of Vue components in Markdown
- File-based routing simplifies site structure
- Built-in support for internationalization and RTL layouts
- Tools for managing browser-only code in an SSR environment
Usage examples
- “How do I configure multiple languages in VitePress?”
- You can define a locales object in your .vitepress/config.ts file to map language codes to specific site configurations and directory structures.
- “How can I use a component that requires the window object?”
- You should wrap the component in a ClientOnly tag or use defineClientComponent to ensure it only loads on the client side, avoiding SSR errors.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/antfu/vitepress/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip vitepress.zip -d .agents/skills
Documentation by Anthony Fu
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:
File-based routing with
.mdfilesVue components work directly in Markdown
Fast HMR with instant updates (<100ms)
Default theme optimized for documentation
Built-in search (local or Algolia)
Before working with VitePress projects:
Check
.vitepress/config.tsfor site configurationLook at
.vitepress/theme/for custom theme extensionsThe
public/directory contains static assets served as-is
The 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.
Core
| 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 |
Features
Code & Content
| 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 |
Theme
| 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 |
Advanced
| Topic | Description | Reference |
|---|---|---|
| Internationalization | Multi-language sites, locale configuration | advanced-i18n |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | advanced-ssr |
Recipes
| Topic | Description | Reference |
|---|---|---|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | recipes-deploy |
Files
- ATTRIBUTION.mdAdded by AutoGineer904 B
- GENERATION.md139 B
- LICENSELicence file added by AutoGineer1.1 KiB
- SKILL.md3.6 KiB
- references/advanced-i18n.md6.3 KiB
- references/advanced-ssr.md4.0 KiB
- references/core-cli.md2.5 KiB
- references/core-config.md7.1 KiB
- references/core-markdown.md6.3 KiB
- references/core-routing.md4.0 KiB
- references/features-code-blocks.md3.6 KiB
- references/features-data-loading.md4.3 KiB
- references/features-dynamic-routes.md4.9 KiB
- references/features-vue.md3.6 KiB
- references/recipes-deploy.md5.3 KiB
- references/theme-config.md6.9 KiB
- references/theme-custom.md5.7 KiB
- references/theme-customization.md8.3 KiB
references/core-config.md
name: vitepress-configuration description: Config file setup, defineConfig helper, site metadata, and build options
Configuration
VitePress configuration is defined in .vitepress/config.[js|ts|mjs|mts]. Use defineConfig for TypeScript intellisense.
Basic Config
// .vitepress/config.ts
import { defineConfig } from 'vitepress'
export default defineConfig({
// Site metadata
title: 'My Docs',
description: 'Documentation site',
lang: 'en-US',
// URL base path (for GitHub Pages: '/repo-name/')
base: '/',
// Theme configuration
themeConfig: {
// See theme-config.md
}
})Site Metadata
export default defineConfig({
title: 'VitePress', // Displayed in nav, used in page titles
titleTemplate: ':title - Docs', // Page title format (:title = h1)
description: 'Site description', // Meta description
lang: 'en-US', // HTML lang attribute
dir: 'ltr', // Text direction: 'ltr' | 'rtl' | 'auto' (see i18n RTL)
head: [
['link', { rel: 'icon', href: '/favicon.ico' }],
['meta', { name: 'theme-color', content: '#5f67ee' }],
['script', { async: '', src: 'https://analytics.example.com/script.js' }]
]
})Build Options
export default defineConfig({
// Source files directory (relative to project root)
srcDir: './src',
// Exclude patterns from source
srcExclude: ['**/README.md', '**/TODO.md'],
// Output directory
outDir: './.vitepress/dist',
// Cache directory
cacheDir: './.vitepress/cache',
// Clean URLs without .html extension (requires server support)
cleanUrls: true,
// Ignore dead links during build
ignoreDeadLinks: true,
// Or specific patterns:
ignoreDeadLinks: ['/playground', /^https?:\/\/localhost/],
// Get last updated timestamp from git
lastUpdated: true
})Base URL & Relocatable Builds
base must start and end with / for sub-path deployment. The one exception is
'./', which produces a relocatable build: every page references assets and
other pages relative to its own location, so the same output works from any
sub-path (IPFS gateways, archives, file://) without rebuilding. Keep
cleanUrls off for relocatable builds. Can also be set per build with
vitepress build --base /base/.
Serving Assets from a CDN (v2)
export default defineConfig({
base: '/',
assetsBase: 'https://cdn.example.com/', // scripts, styles, fonts, imported images → CDN
assetsShards: 4 // spread assets over assets/0..N-1 (for hosts that cap files per dir)
})Upload outDir/assets to the CDN so it is reachable at <assetsBase>/assets/*.
HTML pages, public/ files, and Markdown links stay on base. A cross-origin
CDN must send Access-Control-Allow-Origin (module scripts are fetched in CORS
mode). Can also be passed per build: vitepress build --assetsBase "$CDN_URL".
Icons (v2)
The build collects iconify icons rendered during SSR and emits their styles.
Icons rendered only on the client (inside <ClientOnly> or after hydration)
must be listed explicitly. Names are collection:name, resolved against the
@iconify-json/* packages in your dependencies.
export default defineConfig({
icons: {
include: ['mdi:home', 'simple-icons:discord']
}
})Route Rewrites
Map source paths to different output paths:
export default defineConfig({
rewrites: {
// Static mapping
'packages/pkg-a/src/index.md': 'pkg-a/index.md',
// Dynamic parameters
'packages/:pkg/src/:slug*': ':pkg/:slug*'
}
})Appearance (Dark Mode)
export default defineConfig({
appearance: true, // Enable toggle (default)
appearance: 'dark', // Dark by default
appearance: 'force-dark', // Always dark, no toggle
appearance: 'force-auto', // Always follow system preference
appearance: false // Disable dark mode
})Vite & Vue Configuration
export default defineConfig({
// Pass options to Vite
vite: {
plugins: [],
resolve: { alias: {} },
css: { preprocessorOptions: {} }
},
// Pass options to @vitejs/plugin-vue
vue: {
template: { compilerOptions: {} }
},
// Configure markdown-it
markdown: {
lineNumbers: true,
toc: { level: [1, 2, 3] },
math: true, // Requires markdown-it-mathjax3
headers: true, // Collect headings into useData().page.headers (off by default)
image: { lazyLoad: true }, // Renamed from `lazyLoading` in v2
container: {
tipLabel: 'TIP',
warningLabel: 'WARNING',
dangerLabel: 'DANGER',
// Register additional containers → default titles (v2)
customContainers: { success: 'SUCCESS' }
}
}
})Build Hooks
export default defineConfig({
// Transform page data
transformPageData(pageData, { siteConfig }) {
pageData.frontmatter.head ??= []
pageData.frontmatter.head.push([
'meta', { name: 'og:title', content: pageData.title }
])
},
// Transform head before generating each page
async transformHead(context) {
return [['meta', { name: 'custom', content: context.page }]]
},
// After build completes
async buildEnd(siteConfig) {
// Generate sitemap, RSS, etc.
}
})Directory-Level Overrides (v2)
Override config settings for all pages in a directory by adding a config.ts
(or .js/.mjs/.mts) in that directory. Nested directories inherit and merge
from their parent. Use defineAdditionalConfig for intellisense.
// es/config.ts
import { defineAdditionalConfig } from 'vitepress'
export default defineAdditionalConfig({
description: 'Generador de Sitios Estáticos con Vite y Vue.'
})Only certain settings support this (title, titleTemplate, description, head, lang, dir). The markdown renderer is created once for the whole site, so markdown/per-locale markdown strings can only live in the main config.
Typed Theme Config
defineConfigWithTheme is deprecated in v2. Pass the theme config type to
defineConfig instead:
import { defineConfig } from 'vitepress'
import type { ThemeConfig } from 'awesome-vitepress-theme'
export default defineConfig<ThemeConfig>({
extends: baseConfig,
themeConfig: { /* typed as ThemeConfig */ }
})Dynamic Config
For async configuration:
export default async () => {
const data = await fetch('https://api.example.com/data').then(r => r.json())
return defineConfig({
title: data.title,
themeConfig: {
sidebar: data.sidebar
}
})
}Key Points
Config file supports
.js,.ts,.mjs,.mtsextensionsUse
defineConfigfor TypeScript support (defineConfig<ThemeConfig>for typed theme config;defineConfigWithThemeis deprecated)basemust start and end with/;base: './'enables relocatable buildssrcDirseparates source files from project rootBuild hooks enable custom transformations and post-processing
v2:
assetsBase/assetsShards/iconsare new;metaChunkwas removed;defineAdditionalConfigenables directory-level overrides
<!-- Source references: - https://vitepress.dev/reference/site-config - https://vitepress.dev/guide/getting-started - https://vitepress.dev/guide/asset-handling -->
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- Anthony Fu
- Publisher
- Anthony Fu (Community)
- Source
- antfu/skills · skills/vitepress · commit f63e9ec
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE.md)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Anthony Fu.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vitepress.zip