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/features-data-loading.md
name: vitepress-data-loading description: Build-time data loaders for fetching remote data or processing local files
Data Loading
VitePress data loaders run at build time to load arbitrary data that's serialized as JSON in the client bundle.
Basic Usage
Create a file ending with .data.js or .data.ts:
// example.data.ts
export default {
load() {
return {
hello: 'world',
timestamp: Date.now()
}
}
}Import the data named export:
<script setup>
import { data } from './example.data.ts'
</script>
<template>
<pre>{{ data }}</pre>
</template>Async Data
Fetch remote data:
// api.data.ts
export default {
async load() {
const response = await fetch('https://api.example.com/data')
return response.json()
}
}Local Files with Watch
Process local files with hot reload:
// posts.data.ts
import fs from 'node:fs'
import { parse } from 'csv-parse/sync'
export default {
watch: ['./data/*.csv'],
load(watchedFiles) {
// watchedFiles = array of absolute paths
return watchedFiles.map(file => {
return parse(fs.readFileSync(file, 'utf-8'), {
columns: true,
skip_empty_lines: true
})
})
}
}createContentLoader
Helper for loading markdown content (common for blogs/archives):
// posts.data.ts
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md')Returns array of ContentData:
interface ContentData {
url: string // e.g. /posts/hello.html
frontmatter: Record<string, any>
src?: string // raw markdown (opt-in)
html?: string // rendered HTML (opt-in)
excerpt?: string // excerpt HTML (opt-in)
}With options:
// posts.data.ts
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md', {
includeSrc: true, // Include raw markdown
render: true, // Include rendered HTML
excerpt: true, // Include excerpt (content before first ---)
transform(rawData) {
// Sort by date, newest first
return rawData
.sort((a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date))
.map(page => ({
title: page.frontmatter.title,
url: page.url,
date: page.frontmatter.date,
excerpt: page.excerpt
}))
}
})Usage Example: Blog Index
// posts.data.ts
import { createContentLoader } from 'vitepress'
export default createContentLoader('posts/*.md', {
excerpt: true,
transform(data) {
return data
.filter(post => !post.frontmatter.draft)
.sort((a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date))
}
})<!-- posts/index.md -->
<script setup>
import { data as posts } from './posts.data.ts'
</script>
<template>
<ul>
<li v-for="post in posts" :key="post.url">
<a :href="post.url">{{ post.frontmatter.title }}</a>
<span>{{ post.frontmatter.date }}</span>
</li>
</ul>
</template>Typed Data Loaders
// example.data.ts
import { defineLoader } from 'vitepress'
export interface Data {
posts: Array<{ title: string; url: string }>
}
declare const data: Data
export { data }
export default defineLoader({
watch: ['./posts/*.md'],
async load(): Promise<Data> {
// ...
return { posts: [] }
}
})In Build Hooks
Use in config for generating additional files:
// .vitepress/config.ts
import { createContentLoader } from 'vitepress'
export default {
async buildEnd() {
const posts = await createContentLoader('posts/*.md').load()
// Generate RSS feed, sitemap, etc.
}
}Accessing Config
// example.data.ts
import type { SiteConfig } from 'vitepress'
export default {
load() {
const config: SiteConfig = (globalThis as any).VITEPRESS_CONFIG
return { base: config.site.base }
}
}Key Points
Data loaders run only at build time in Node.js
File must end with
.data.jsor.data.tsImport the
datanamed export (not default)Use
watchfor local file hot reload during devcreateContentLoadersimplifies loading markdown collectionsKeep data small - it's inlined in the client bundle
Heavy data should use
transformto reduce payload
<!-- Source references: - https://vitepress.dev/guide/data-loading -->
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