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/theme-config.md
name: vitepress-theme-configuration description: Default theme configuration for navigation, sidebar, search, social links, and footer
Theme Configuration
Configure the default theme via themeConfig in your VitePress config.
Navigation
export default {
themeConfig: {
// Site title in nav (overrides config.title)
siteTitle: 'My Docs',
siteTitle: false, // Hide title
// Logo
logo: '/logo.svg',
logo: { light: '/light-logo.svg', dark: '/dark-logo.svg', alt: 'Logo' },
// Nav links
nav: [
{ text: 'Guide', link: '/guide/' },
{ text: 'API', link: '/api/' },
{ text: 'GitHub', link: 'https://github.com/...' }
]
}
}Dropdown Menu
nav: [
{
text: 'Dropdown',
items: [
{ text: 'Item A', link: '/item-a' },
{ text: 'Item B', link: '/item-b' }
]
},
// With sections
{
text: 'Versions',
items: [
{
text: 'v2.x',
items: [
{ text: 'v2.0', link: '/v2/' },
{ text: 'v2.1', link: '/v2.1/' }
]
}
]
}
]Active Match
Control when nav item shows as active:
nav: [
{
text: 'Guide',
link: '/guide/',
activeMatch: '/guide/' // Regex pattern
}
]Sidebar
Simple Sidebar
sidebar: [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/guide/' },
{ text: 'Getting Started', link: '/guide/getting-started' }
]
}
]Multiple Sidebars
Different sidebar per section:
sidebar: {
'/guide/': [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/guide/' },
{ text: 'Getting Started', link: '/guide/getting-started' }
]
}
],
'/api/': [
{
text: 'API Reference',
items: [
{ text: 'Config', link: '/api/config' },
{ text: 'Methods', link: '/api/methods' }
]
}
]
}Collapsible Groups
sidebar: [
{
text: 'Section A',
collapsed: false, // Open by default, can collapse
items: [...]
},
{
text: 'Section B',
collapsed: true, // Collapsed by default
items: [...]
}
]Base Path
Simplify links with common base. base works at the root of a sidebar section
and inside nested groups (a nested base overrides the parent prefix):
sidebar: {
'/guide/': {
base: '/guide/',
items: [
{ text: 'Intro', link: 'intro' }, // /guide/intro
{ text: 'Setup', link: 'getting-started' } // /guide/getting-started
]
}
}sidebar: [
{
text: 'Reference',
base: '/reference/',
items: [
{ text: 'Site Config', link: 'site-config' }, // /reference/site-config
{
text: 'Default Theme',
base: '/reference/default-theme-', // overrides parent base
items: [
{ text: 'Nav', link: 'nav' } // /reference/default-theme-nav
]
}
]
}
]Search
Local Search
themeConfig: {
search: {
provider: 'local'
}
}With options:
search: {
provider: 'local',
options: {
miniSearch: {
searchOptions: {
fuzzy: 0.2,
prefix: true
}
}
}
}Algolia DocSearch
search: {
provider: 'algolia',
options: {
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_API_KEY',
indexName: 'YOUR_INDEX_NAME'
}
}Social Links
socialLinks: [
{ icon: 'github', link: 'https://github.com/...' },
{ icon: 'twitter', link: 'https://twitter.com/...' },
{ icon: 'discord', link: '/community', target: '_self' }, // v2: `target`
// v2: any iconify collection installed as `collection:name`
{ icon: 'lucide:rss', link: '/feed.rss' },
// Custom SVG
{
icon: { svg: '<svg>...</svg>' },
link: 'https://...',
ariaLabel: 'Custom Link'
}
]Footer
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2024 My Project'
}Footer only displays on pages without sidebar.
Edit Link
editLink: {
pattern: 'https://github.com/org/repo/edit/main/docs/:path',
text: 'Edit this page on GitHub'
}:path is replaced with the page's source file path.
Last Updated
Enable in site config:
export default {
lastUpdated: true // Get timestamp from git
}Customize display:
themeConfig: {
lastUpdated: {
text: 'Updated at',
formatOptions: {
dateStyle: 'full',
timeStyle: 'medium'
}
}
}Outline (Table of Contents)
outline: {
level: [2, 3], // Which heading levels to show
label: 'On this page'
}Or just the level:
outline: 'deep' // Same as [2, 6]
outline: 2 // Only h2
outline: [2, 4] // h2 through h4Doc Footer Navigation
docFooter: {
prev: 'Previous page',
next: 'Next page'
}
// Or disable:
docFooter: {
prev: false,
next: false
}External Link Icon
externalLinkIcon: true // Show icon on external linksGraded Containers (v2)
gradedContainers: true // danger red, warning orange, caution yellowColors custom containers, GitHub-flavored alerts, and badges on a graded
severity scale. Default (false) matches GitHub (caution shares danger's red).
i18n Routing (v2)
i18nRouting accepts a boolean, or a function to customize the locale link:
i18nRouting(data, route, targetLocale) {
const target = data.site.value.locales[targetLocale]
const link = target.link || (targetLocale === 'root' ? '/' : `/${targetLocale}/`)
return `${link}${route.data.relativePath.replace(/\.md$/, '')}${route.hash}`
}Carbon Ads
carbonAds: {
code: 'your-carbon-code',
placement: 'your-carbon-placement',
format: 'classic' // v2: 'classic' | 'responsive' | 'cover'
}Appearance & Accessible Labels
darkModeSwitchLabel: 'Appearance',
lightModeSwitchTitle: 'Switch to light theme',
darkModeSwitchTitle: 'Switch to dark theme',
sidebarMenuLabel: 'Menu',
returnToTopLabel: 'Return to top',
// v2 navigation landmark labels:
navMenuLabel: 'Main Navigation', // navbar/mobile menu landmarks
mobileMenuLabel: 'Menu', // hamburger button aria-label
extraMenuLabel: 'More options' // `⋯` overflow menu button aria-labelKey Points
navdefines top navigation linkssidebarcan be array (single) or object (multiple sidebars)Use
collapsedfor collapsible sidebar sectionsLocal search works out of the box
editLink.patternuses:pathplaceholderEnable
lastUpdatedin site config, customize in themeConfigv2: social links accept
targetand iconifycollection:nameicons; sidebarbaseworks in nested groups;gradedContainersandi18nRoutingfunctions are new
<!-- Source references: - https://vitepress.dev/reference/default-theme-config - https://vitepress.dev/reference/default-theme-nav - https://vitepress.dev/reference/default-theme-sidebar - https://vitepress.dev/reference/default-theme-search -->
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