Nuxt

Nuxt App

Docus 构建在 Nuxt 4 之上，这意味着你的文档项目本身就是一个完整的 Nuxt 应用。使用 Docus CLI 创建项目时，它默认会添加一个 layer，让你获得标准 Nuxt 应用的全部灵活性。

默认情况下，Docus starter 只包含 content/、public/ 文件夹和一个 package.json。这已经足够你开始编写文档。你也可以继续使用 Nuxt 项目的任何功能，从 nuxt.config.ts 到 components 或 plugins。

Nuxt 模块

想为文档增强自定义功能？你可以像在任何 Nuxt 应用中一样安装并配置 Nuxt modules。

为文档添加 Vercel Web Analytics：

npm install @vercel/analytics

export default defineNuxtConfig({
  modules: ['@vercel/analytics/nuxt/module'],
})

自定义组件

借助 Nuxt Content、Nuxt UI 和 MDC 语法，你可以直接在 Markdown 中使用 Nuxt UI 组件，无需额外配置。

不过你并不局限于预构建组件。Docus 也让你可以轻松在 Nuxt 应用中创建自己的 Vue 组件，并在内容中使用它们。

下面是一个简单示例：在 Nuxt 应用的 components 文件夹中创建自定义 BrowserFrame 组件，并在 Markdown 中使用它。

代码Markdown预览

components/content/BrowserFrame.vue

<script setup lang="ts">
defineProps<{
  title?: string
}>()
</script>

<template>
  <div class="w-fit rounded-xl border border-muted bg-accented shadow-md overflow-hidden px-2 pb-2">
    <div class="flex justify-between items-center px-2 py-2 bg-accented border-accented border-b">
      <div class="flex items-center gap-2">
        <span class="w-3 h-3 bg-red-500 rounded-full" />
        <span class="w-3 h-3 bg-yellow-500 rounded-full" />
        <span class="w-3 h-3 bg-green-500 rounded-full" />
      </div>
      <div class="text-muted">
        {{ title }}
      </div>
    </div>
    <slot mdc-unwrap="p" />
  </div>
</template>

这种方式让你可以用 Markdown 创建由 Nuxt 组件驱动的动态文档。

Vue 页面

除了 Markdown 页面，你也可以在 pages/ 目录中创建 Vue 页面。

<template>
  <div>
    <h1>Hello</h1>
  </div>
</template>

你也可以使用 definePageMeta 函数设置页面 meta，例如使用 default 或 docs 布局，也可以定义页面是否显示页眉和页脚：

<script setup lang="ts">
definePageMeta({
  layout: 'default',
  // 移除页眉
  header: false,
  // 移除页脚
  footer: false,
})
</script>

自定义布局

Docus 使用两个布局：

• default 布局用于着陆页和自定义 Vue 页面
• docs 布局用于文档页面

如果你想使用不同布局，可以在 app/layouts/ 目录中创建一个。

<template>
  <main class="custom-layout">
    <slot />
  </main>
</template>