vike-vue-content

What vike-vue-content is and what it does for you.

vike-vue-content

vike-vue-content is a content rendering framework for Vike + Vue. Drop Markdown files into a content directory and it automatically generates routes, sidebar navigation, a page table of contents, and prev/next navigation — plus a batteries-included theme system.

This entire documentation site is rendered with vike-vue-content — the page you're reading is a live example.

Why use it

  • Content as routes: the directory structure of content/**/*.md maps directly to page paths, no route table to maintain.
  • Zero page boilerplate: Page and data are auto-mounted by the config, so adding a doc is just writing Markdown.
  • A complete docs shell: sidebar, table of contents (TOC), and prev/next navigation are ready-made components.
  • Live demos: auto-register .vue demos from demosDir and render live previews with source tabs from Markdown.
  • Theme system: 18 primary colors including black, light/dark modes, radius and font customization — with no FOUC.
  • Prerender-friendly: a built-in onBeforePrerenderStart hook enumerates every content path to emit static HTML.
  • Multi-entry / multi-locale: different page directories can host different content collections, so a multi-language site is natural.

Core concepts

ConceptDescription
CollectionA namespace for a set of content, matching a top-level directory under the content folder, e.g. zh-CN, en-US.
BaseThe URL prefix a docs page is mounted at, inferred from the page file's location under pages/, e.g. /en-US.
Content EntryThe structured data of a parsed Markdown file: title, description, TOC, body AST, etc.
NavigationThe sidebar tree built from the content directory structure plus .config.yml / frontmatter.

Next steps