Getting Started

This guide takes you from zero to rendering your first doc with vike-vue-content.

Prerequisites

A Vue project already set up with Vike and vike-vue.

1. Install

npm install vike-vue-content
# or pnpm add vike-vue-content

2. Extend the global config

Extend vike-vue-content/config in your global pages/+config.ts:

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

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

Once extended, vike-vue-content/config will:

• Auto-mount Page to the DocsPage component and data to the built-in data loader (you don't write these two files yourself).
• Register a theme init script to avoid first-paint theme flicker.
• Register a Vite plugin that handles compile-time inference of the docs route prefix.

3. Create the content directory

The content directory defaults to content/. The first-level directory name is the collection name:

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

Write a Markdown file:

---
title: Get Started
description: My first doc.
---

# Get Started

Welcome to vike-vue-content.

4. Create the docs page anchors

Create a directory under pages/ for this collection, with three anchor files. The directory's location under pages/ determines the access prefix (base) — placing it at pages/docs/ gives the prefix /docs:

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

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

Both createDocsRoute() and createDocsPrerender() are called with zero arguments. The base is inferred from the file's location at compile time, so you never pass it manually.

5. Run

npm run dev

Visit /docs and /docs/getting-started to see a full docs page with sidebar, TOC, and prev/next navigation.

That's it

You don't need to write +Page.vue or +data.ts — they're auto-mounted by the config. To add docs, just drop Markdown files into content/docs/.

Next

• Content-driven Routing: directories, ordering prefixes, and index files.
• Frontmatter & Metadata: title, description, TOC, navigation metadata.
• Directory Config & Redirects: how .config.yml works.