vike-vue-content

在 Vike + Vue 项目中接入 vike-vue-content，渲染你的第一篇文档。

快速开始

本指南带你从零接入 vike-vue-content，并渲染第一篇文档。

前置条件

一个已经配置好 Vike 和 vike-vue 的 Vue 项目。

1. 安装

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

2. 接入全局 config

在全局 pages/+config.ts 中扩展 vike-vue-content/config：

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

接入后，vike-vue-content/config 会：

  • 自动把 Page 挂到 DocsPage 组件，把 data 挂到内置数据加载器（你不用自己写这两个文件）。
  • 注册主题初始化脚本，避免首屏主题闪烁。
  • 注册 Vite 插件，处理 docs 路由前缀的编译期推导。

3. 创建内容目录

内容目录默认是 content/。第一层目录名就是 collection（集合） 名：

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

写一篇 Markdown：

---
title: 开始使用
description: 我的第一篇文档。
---

# 开始使用

欢迎使用 vike-vue-content。

4. 创建 docs 页面锚点

在 pages/ 下为这个 collection 建一个目录，放入三个锚点文件。目录在 pages/ 中的位置决定了访问前缀（base）——下面放在 pages/docs/，前缀就是 /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'
createDocsRoute() 与 createDocsPrerender() 都是零参数调用。base 会在编译期从文件位置自动推导出来，无需手动传入。

5. 运行

npm run dev

访问 /docs 和 /docs/getting-started，就能看到带侧边栏、目录和上下页导航的完整文档页面。

这就够了

你不需要写 +Page.vue 或 +data.ts——它们由 config 自动挂载。新增文档时，只要往 content/docs/ 里加 Markdown 文件即可。

接下来