website·Indexed 40 days ago
https://vitepress.dev/A static site generator designed for building fast, content-centric sites. Documentation covers getting started, site configuration, routing, internationalization, and the default theme. Includes guides on using Vue in Markdown, build-time data loading, SSR compatibility, and deploying to platforms like Netlify, Vercel, and GitHub Pages.
index.md becomes /index.html (accessible as /), and guide/getting-started.md becomes /guide/getting-started.html.Include the content of another Markdown file using the <!--@@include: path--> directive. This supports nested inclusions and relative paths. You can prefix paths with @ to reference the source root (usually the project root).
Selection Methods:
{start,end} (e.g., {3,} for line 3 onwards, {,10} for up to line 10, or {1,10}).#region-name to include content between <!-- #region name --> and <!-- #endregion name --> tags.#anchor-id to include a specific section. The ID is the generated heading ID or a custom one defined via {#custom-id}.Configuration:
markdown.include.silent: true: Logs a warning instead of throwing a build error if a file or region is missing.markdown.include.rebaseRelativeUrls: false: Makes relative links/images in the included file resolve relative to the including page instead of the included file's location.# Docs
<!-- Include relative file -->
<!--@@include: ./parts/basics.md-->
<!-- Include specific line range -->
<!--@@include: ./parts/basics.md{3,10}-->
<!-- Include VS Code region with line range -->
<!--@@include: ./parts/basics.md#basic-usage{,2}-->
<!-- Include by heading anchor -->
<!--@@include: ./parts/basics.md#my-base-section-->::: raw container wraps content in a <div class="vp-raw"> to prevent style and router conflicts, which is useful for documenting component libraries. Style isolation is opt-in via a PostCSS plugin.npm add -D postcss// docs/postcss.config.mjs
import { postcssIsolateStyles } from 'vitepress'
export default {
plugins: [
postcssIsolateStyles({
includeFiles: [/custom\.css/] // defaults to [/vp-doc\.css/, /base\.css/]
})
]
}search: false to the page's frontmatter. If using a custom _render function, this must be handled manually within that function.Dynamic routes allow generating multiple pages from a single Markdown template using route parameters (e.g., [pkg].md). Because VitePress is a static site generator, every dynamic route file must have a corresponding paths loader file (e.g., [pkg].paths.js or [pkg].paths.ts).
The loader must export a default object with a paths method that returns an array of objects containing a params property.
// packages/[pkg].paths.js
export default {
paths() {
return [
{ params: { pkg: 'foo' } },
{ params: { pkg: 'bar' } }
]
}
}base configuration for static images, eliminating the need for the :src="$withBase(...)" syntax used in VuePress. You can now use standard Markdown image syntax for static assets. However, for dynamic images, you must still use the withBase helper.- <img :src="$withBase('/foo.png')" alt="foo">
+ Update the following frontmatter settings when migrating from VitePress 0.x:
home: true to layout: home. Additional homepage settings are now available in the Home Page guide.footer option has been moved from individual page frontmatter to the global themeConfig.footer configuration.{open} makes a details block open by default, and {no-title} removes the title element (except for details blocks).::: details Click me to toggle the code {open}
```js
console.log('Hello, VitePress!'):::
::: tip {no-title} Just want to try it out? Skip to the Quickstart. :::
locales object in your VitePress config. The root locale represents the default language, while other keys (e.g., fr) correspond to the directory names for those languages.// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'
export default defineConfig({
locales: {
root: {
label: 'English',
lang: 'en'
},
fr: {
label: 'French',
lang: 'fr', // Added as `lang` attribute on <html> tag
link: '/fr/guide' // Link for the navbar translations menu
}
}
})// Recommended Directory Structure: // docs/ // ├─ es/ // │ └─ foo.md // ├─ fr/ // │ └─ foo.md // └─ foo.md
./docs) if integrating into an existing project.# npm
npx vitepress init
# pnpm
pnpm vitepress init
# yarn
yarn vitepress init
# bun
bun vitepress init