DEV Community

EralChen
EralChen

Posted on

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

#vue #vike #documentation #framework

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

Add prerendering support if you need it:

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

Drop in your Markdown files:

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

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
  },
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Links

Top comments (0)