vike-vue-content: A Zero-Boilerplate Docs Framework Built on Vike + Vue

EralChen — Thu, 02 Jul 2026 08:33:34 +0000

Intro

You've probably built some genuinely useful tools or libraries before. Big or small, a documentation site is essential if you want people to actually use them well.

Of course, VitePress and Nuxt Content are both excellent choices.

vike-vue-content exists because it stays lightweight.

Point it at a folder, and Markdown files become pages
Support i18n with multiple entries
Run full-text search on the client without extra services or setup
Use the familiar vite.config base option for sub-path deployment
Built-in theme components, imported on demand
A single Markdown line like :::demo{preview="hello/index.vue"} renders a live demo with highlighted source

👉 Live Demo — the site itself is built with vike-vue-content. Theme switching, code highlighting, live demos, and full-text search all work out of the box. You can also browse the site source code.

Quick Start

npm create vike@latest -- --vue
npm install vike-vue-content

Configure Vike in three lines:

// pages/+config.ts
import vikeVue from 'vike-vue/config'
import vikeVueContent from 'vike-vue-content/config'
import type { Config } from 'vike/types'

export default {
  extends: [vikeVue, vikeVueContent],
} satisfies Config

Define your docs page:

// pages/docs/+config.ts
import { defineDocsPageConfig } from 'vike-vue-content/docs'

export default defineDocsPageConfig({
  collection: 'docs',
  contentDir: 'content',
})

// pages/docs/+route.ts
export { createDocsRoute as default } from 'vike-vue-content/docs/route'

Add prerendering support if you need it:

// pages/docs/+onBeforePrerenderStart.ts
export { createDocsPrerender as default } from 'vike-vue-content/docs/prerender'

Drop in your Markdown files:

content/
└── docs/
    ├── index.md               # → /docs/
    ├── 1.getting-started.md   # → /docs/getting-started
    └── guide/
        └── routing.md         # → /docs/guide/routing

Start the dev server and you're done.

The Comark Plugin System

Markdown runs through the Comark AST transformation pipeline:

Shiki code highlighting
Mermaid diagrams
Custom component mappings (HTML tag → Vue component)

Plugins work at the AST layer instead of the rendering layer. That means you can swap highlighters, add custom components, or extend Markdown behavior without rewriting the whole rendering pipeline.

// pages/+content.ts
import highlight from 'vike-vue-content/comark/highlight'

export default {
  plugins: [
    highlight(),
  ],
  components: {
    // HTML tag -> Vue component mapping
  },
}

Explore the Source

Clone and run locally:

git clone https://github.com/EralChen/vike-vue-content
pnpm install
pnpm run lib
pnpm run vike:dev   # http://localhost:3000

DEV Community: EralChen

vike-vue-content: A Zero-Boilerplate Docs Framework Built on Vike + Vue

Intro

Quick Start

The Comark Plugin System

Explore the Source

Links