$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vitepress-skilldVite & Vue powered static site generator. ALWAYS use when writing code importing \"vitepress\". Consult for debugging, best practices, or modifying vitepress.
| 1 | # vuejs/vitepress `vitepress@1.6.4` |
| 2 | **Tags:** latest: 1.6.4, next: 2.0.0-alpha.17 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - BREAKING: `pathname://` — protocol dropped in v1.0.0-rc.9, use `target="_self"` or `target="_blank"` instead [source](./references/releases/CHANGELOG.md) |
| 10 | |
| 11 | - BREAKING: `shikiSetup` — renamed from `shikijiSetup` in v1.0.0-rc.41 following the migration from `shikiji` back to `shiki` [source](./references/releases/CHANGELOG.md) |
| 12 | |
| 13 | - BREAKING: `sidebar` items — `children` key was renamed to `items` in v1.0.0, and top-level items no longer support `link` [source](./references/docs/en/guide/migration-from-vitepress-0.md) |
| 14 | |
| 15 | - BREAKING: `collapsed` — replaced `collapsible` sidebar option in v1.0.0-alpha.44; `collapsed: true` implies collapsible [source](./references/releases/CHANGELOG.md) |
| 16 | |
| 17 | - BREAKING: `markdown.headers` — disabled by default since v1.0.0-alpha.57; `PageData` no longer includes headers unless explicitly enabled [source](./references/releases/CHANGELOG.md) |
| 18 | |
| 19 | - NEW: `onAfterPageLoad` — router hook added in v1.4.0, triggered after the page is loaded and before it is rendered [source](./references/releases/CHANGELOG.md) |
| 20 | |
| 21 | - NEW: `onBeforePageLoad` — router hook added in v1.0.0-beta.4, allows executing logic before a page load starts [source](./references/releases/CHANGELOG.md) |
| 22 | |
| 23 | - NEW: `useData().hash` — new property in v1.1.0 that provides a reactive reference to the current URL hash [source](./references/releases/CHANGELOG.md) |
| 24 | |
| 25 | - NEW: `useSidebar()` — exposed in v1.0.0-beta.4, provides access to sidebar state and logic in custom themes [source](./references/releases/CHANGELOG.md) |
| 26 | |
| 27 | - NEW: `defineClientComponent()` — helper added in v1.0.0-alpha.59 for creating components that only render on the client [source](./references/releases/CHANGELOG.md) |
| 28 | |
| 29 | - NEW: `onContentUpdated` — hook now triggers on frontmatter-only changes as of v1.4.0 [source](./references/releases/CHANGELOG.md) |
| 30 | |
| 31 | - NEW: `createContentLoader()` — helper added in v1.0.0-alpha.53 to load content from markdown files with glob support [source](./references/releases/CHANGELOG.md) |
| 32 | |
| 33 | - NEW: `mergeConfig()` — utility exported in v1.0.0-rc.25 to assist in merging VitePress configurations [source](./references/releases/CHANGELOG.md) |
| 34 | |
| 35 | - NEW: `appearance: 'force-auto'` — new option added in v1.3.0 to force color scheme based on user system preference [source](./references/releases/CHANGELOG.md) |
| 36 | |
| 37 | **Also changed:** `PageData.filePath` new alpha.75 · `Theme.extends` new alpha.50 · `Theme.setup` deprecated alpha.50 · `Theme.NotFound` deprecated alpha.50 · `on-demand social icons` experimental v1.5.0 · `externalLinkIcon` option new beta.4 · `cleanUrls` stable alpha.41 · `metaChunk` experimental beta.6 · `rewrites` experimental alpha.41 · `sitemap` experimental beta.7 |
| 38 | |
| 39 | ## Best Practices |
| 40 | |
| 41 | - Use `createContentLoader` for archives and indexes over manual data loading — automatically handles caching and minimizes client-side JSON weight [source](./references/docs/en/guide/data-loading.md) |
| 42 | |
| 43 | ```ts |
| 44 | import { createContentLoader } from 'vitepress' |
| 45 | export default createContentLoader('posts/*.md', { excerpt: true }) |
| 46 | ``` |
| 47 | |
| 48 | - Wrap browser-only components with `defineClientComponent` — prevents SSR/SSG build failures when libraries access `window` or `document` on import [source](./references/docs/en/guide/ssr-compat.md) |
| 49 | |
| 50 | ```vue |
| 51 | <script setup> |
| 52 | import { defineClientComponent } from 'vitepress' |
| 53 | const ClientOnlyComp = defineClientComponent(() => import('./BrowserComponent.vue')) |
| 54 | </script> |
| 55 | ``` |
| 56 | |
| 57 | - Prefer relative URLs for images and assets in Markdown — enables Vite's hashing pipeline and automatic base64 inlining for small files [source](./references/docs/en/guide/asset-handling.md) |
| 58 | |
| 59 | - Use the `withBase()` helper for dynamic paths in theme components — ensures assets resolve correctly regardless of the site's deployment `base` URL [source](./references/docs/en/guide/asset-handling.md) |
| 60 | |
| 61 | - Enable `cleanUrls: true` only when server-side support is confirmed — prevents broken direct links on platforms that do not automatically map `/foo` to `/foo.html` [source](./references/docs/en/guide/routing.md) |
| 62 | |
| 63 | - Target rewritten paths for relative links when using `rewrites` — links must resolve against the final URL structure, not the source directory structure [source](./references/docs/en/guide/routing.md) |
| 64 | |
| 65 | - Pass large Markdown or HTML blocks via the `content` property in dynamic route loaders — prevents bloating the client-side JavaScript payload with serialized params [source](./references/docs/en/guide/routing.md) |
| 66 | |
| 67 | ```js |
| 68 | // [pkg].paths.js |
| 69 | export default { |