vike-vue-content

How the content directory maps automatically to Vike page routes.

Content-driven Routing

vike-vue-content maps the structure of your content directory directly to page routes — no route table to write by hand.

Directory-to-route mapping

Each docs page anchor (pages/<base>/) binds to a collection. The collection is the top-level directory name under the content folder. Markdown files inside that collection map under <base> by their relative path:

Content fileCollectionBaseRoute
content/docs/index.mddocs/docs/docs
content/docs/getting-started.mddocs/docs/docs/getting-started
content/docs/guide/routing.mddocs/docs/docs/guide/routing

In other words: route = base + relative path with the collection prefix removed.

Index files

A directory's index.md maps to the directory path itself, not /index:

Content fileRoute
content/docs/index.md/docs
content/docs/guide/index.md/docs/guide

Numeric ordering prefixes

File and directory names can take a number. prefix to control order (matching Nuxt Content). The prefix only affects ordering and does not appear in the final route:

content/docs/
├── 1.introduction.md      → /docs/introduction
├── 2.getting-started.md   → /docs/getting-started
└── guide/
    ├── 1.routing.md       → /docs/guide/routing
    └── 2.frontmatter.md   → /docs/guide/frontmatter

Ordering applies to both the sidebar navigation and prev/next navigation.

Base comes from the filesystem location

A docs page's access prefix (base) is determined by the anchor directory's physical location under pages/:

Anchor directoryBase
pages/docs//docs
pages/en-US//en-US
pages/guide/api//guide/api

This is exactly why createDocsRoute() and createDocsPrerender() can be called with zero arguments — the base is inferred from the path at compile time, no manual config needed.

Multi-entry & multi-locale

Mount different collections under different page directories to host several independent doc trees in one site. This very site uses two collections for Chinese and English:

pages/
├── zh-CN/   → collection: zh-CN, base: /zh-CN
└── en-US/   → collection: en-US, base: /en-US

content/
├── zh-CN/   # Chinese content
└── en-US/   # English content

Routing, navigation, and prerendering are isolated per entry and don't interfere with each other.

Prerendering

The onBeforePrerenderStart hook returned by createDocsPrerender() enumerates every content path in the collection (the final public path with ordering prefixes stripped) and emits static HTML page by page. Combined with global prerender: true, the whole site can be deployed as plain static files.