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://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 or Anthony Fu.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vitepress.zip