DEV Community

EralChen
EralChen

Posted on

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

#vue #vike #documentation #framework

If you've ever built a documentation site with Vue, you know the drill:

  • Write a +Page.vue for every route
  • Manually wire up Markdown loaders
  • Set up code highlighting, copy buttons, responsive layouts…
  • Repeat for each new section

vike-vue-content eliminates all of that. It's a content rendering framework built on Vike + Vue that turns your Markdown files into a fully functional docs site β€” no page templates, no route tables, no boilerplate.

πŸ‘‰ Live Demo β€” try it now The site you're looking at is itself built with vike-vue-content. Theme switching, code highlighting, live Vue demos, full-text search β€” all working out of the box.

What is it?

vike-vue-content ships as a Vike Config Extension. That means it mounts docs.page, docs.data, and other hooks automatically. You write Markdown; it renders pages. No +Page.vue required.

// 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

Three lines. That's the entire setup.

Key Features

πŸ—ΊοΈ Content-driven routing

Every file under content/**/*.md becomes a page route automatically. No route table to maintain.

content/
└── docs/
    β”œβ”€β”€ index.md               # β†’ /docs/
    β”œβ”€β”€ 1.getting-started.md   # β†’ /docs/getting-started
    └── guide/
        └── routing.md         # β†’ /docs/guide/routing
Enter fullscreen mode Exit fullscreen mode

Just drop Markdown files in the right directory and they're live.

πŸ”Œ Comark plugin system

AST-level Markdown transformation pipeline. Supports:

  • Shiki code highlighting with language-aware themes
  • Mermaid diagram rendering
  • Custom component mappings β€” map any HTML tag to a Vue component 
// pages/+content.ts
import highlight from 'vike-vue-content/comark/highlight'

export default {
  plugins: [
    highlight(),
  ],
  components: {
    // Map HTML tags to Vue components β€” used by ContentRenderer
  },
}
Enter fullscreen mode Exit fullscreen mode

πŸŽ›οΈ Live Vue demos

Auto-register .vue demo files from your demosDir and render live previews with source tabs β€” from a single Markdown declaration. No manual import, no boilerplate.

Write a demo component:

<!-- demos/button-demo.vue -->
<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
Enter fullscreen mode Exit fullscreen mode

Reference it in Markdown:

::demo button-demo
Enter fullscreen mode Exit fullscreen mode

That renders a live preview + highlighted source code in tabs.

🎨 Theme system

17 accent colors Γ— neutral tone combinations, dark/light mode, radius and font presets. Switch themes with a single config change.

πŸ” Full-text search

Search index built at build time, queried client-side. No external service dependency.

πŸš€ SSG / SSR dual mode

Powered by Vike. The built-in onBeforePrerenderStart hook enumerates every content path. Compatible with Vite base configuration for full static export.

Quick Start 

npm install vike-vue-content
Enter fullscreen mode Exit fullscreen mode

Then configure your Vike extension (3 lines shown above), define a docs page:

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

export default defineDocsPageConfig({
  collection: 'docs',
  contentDir: 'content',
})
Enter fullscreen mode Exit fullscreen mode

Add route + prerender helpers:

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

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

Drop some Markdown files under content/docs/, start the dev server β€” done. Page and data are already wired by the config.

Why not Nuxt Content or VitePress?

Great question. Those are solid tools. Here's where vike-vue-content differs:

vike-vue-content Nuxt Content VitePress
Framework Vike (Vite-native) Nuxt Vite (custom)
Page templates None needed Needed Needed
Routing File-based, automatic File-based File-based
Vue demo rendering Built-in Manual setup Manual setup
SSR control Full (SSG/SSR/SPA) Nuxt SSR SSG only
Config extension model Vike extends Nuxt modules Vite plugins

If you're already in the Vike ecosystem or want finer SSR control without a full Nuxt project, vike-vue-content is the natural fit.

The Comark Connection

vike-vue-content uses Comark β€” a composable Markdown parser built on remark + rehype. The plugin system lets you transform the AST at any stage:

  • Add syntax highlighting before rendering
  • Inject custom Vue component nodes
  • Strip or transform Mermaid blocks into SVGs
  • Post-process HTML for accessibility

This means your docs site can evolve without rewriting the rendering pipeline.

Try it

πŸ‘‰ Live Demo β€” the documentation site you see there is itself built with vike-vue-content. Theme switching, code highlighting, live demos, and full-text search are all working out of the box.

Or clone and run locally:

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

The example site doubles as the full documentation β€” theme system, components, content queries, and more.

Links

If you're building docs with Vue and Vite, check out the live demo and give it a look. Feedback and contributions welcome.

Top comments (0)