Generated banner for Vitepress
Generated logo for Vitepress

Vitepress

Anthony FuCommunityCreated by Anthony Fu

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found

From the author

VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
— the description by Anthony Fu

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

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/antfu/vitepress/download
  2. Unzip 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 .md files

  • Vue 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.ts for site configuration

  • Look at .vitepress/theme/ for custom theme extensions

  • The 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

TopicDescriptionReference
ConfigurationConfig file setup, defineConfig, site metadatacore-config
CLICommand-line interface: dev, build, preview, initcore-cli
RoutingFile-based routing, source directory, rewritescore-routing
MarkdownFrontmatter, containers, tables, anchors, includescore-markdown

Features

Code & Content
TopicDescriptionReference
Code BlocksSyntax highlighting, line highlighting, diffs, focusfeatures-code-blocks
Vue in MarkdownComponents, script setup, directives, templatingfeatures-vue
Data LoadingBuild-time data loaders, createContentLoaderfeatures-data-loading
Dynamic RoutesGenerate pages from data, paths loader filesfeatures-dynamic-routes

Theme

TopicDescriptionReference
Theme ConfigNav, sidebar, search, social links, footertheme-config
CustomizationCSS variables, slots, fonts, global componentstheme-customization
Custom ThemeBuilding themes from scratch, theme interfacetheme-custom

Advanced

TopicDescriptionReference
InternationalizationMulti-language sites, locale configurationadvanced-i18n
SSR CompatibilityServer-side rendering, ClientOnly, dynamic importsadvanced-ssr

Recipes

TopicDescriptionReference
DeploymentGitHub Pages, Netlify, Vercel, Cloudflare, Nginxrecipes-deploy

Files

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, .mts extensions

  • Use defineConfig for TypeScript support (defineConfig<ThemeConfig> for typed theme config; defineConfigWithTheme is deprecated)

  • base must start and end with /; base: './' enables relocatable builds

  • srcDir separates source files from project root

  • Build hooks enable custom transformations and post-processing

  • v2: assetsBase/assetsShards/icons are new; metaChunk was removed; defineAdditionalConfig enables 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