> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/zh/concepts/nuxt.md](/docs/manual/zh/concepts/nuxt.md).

---
title: Nuxt
description: 使用 Nuxt 组件构建交互式和可复用的元素
navigation:
  icon: i-simple-icons-nuxt
---

## TockDocs 是一个 Nuxt 应用

TockDocs 以 **Nuxt 层** 的形式分发。当您搭建项目时，您会获得一个普通的 Nuxt 应用，它扩展了该层并可以使用标准 Nuxt 生态系统。

一个起步应用通常包括：

```bash
my-docs/
├── content/
├── nuxt.config.ts
├── package.json
└── public/
```

在此基础上，您可以添加任何标准的 Nuxt 目录，如 `app/`、`server/`、`plugins/` 或 `modules/`。

## Nuxt 模块

您可以像在任何其他 Nuxt 项目中一样安装和配置 Nuxt 模块。

示例：添加 Vercel Analytics。

::steps

### 安装模块

```bash [Terminal]
npm install @vercel/analytics
```

### 在 `nuxt.config.ts` 中启用

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['tockdocs'],
  modules: ['@vercel/analytics/nuxt/module'],
})
```
::

## 文档中的自定义 Vue 组件

大多数文档 UI 可以用 Markdown + MDC 完成，但您也可以创建自己的 Vue 组件并在内容中使用它们。

示例组件：

::tabs
:::tabs-item{.my-5 icon="i-lucide-code" label="Vue 组件"}
```vue [app/components/content/BrowserFrame.vue]
<script setup lang="ts">
defineProps<{
  title?: string
}>()
</script>

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

:::tabs-item{icon="i-simple-icons-markdown" label="Markdown"}
```mdc
::browser-frame{title="阿尔卑斯山"}
![山脉风景](https://ptg90phsi6rf8j7h.public.blob.vercel-storage.com/site/mountains.webp)
::
```
:::

:::tabs-item{icon="i-lucide-eye" label="预览"}
::::browser-frame{title="阿尔卑斯山"}
![山脉风景](https://ptg90phsi6rf8j7h.public.blob.vercel-storage.com/site/mountains.webp)
::::
:::
::

## Vue 页面

除了 Markdown 页面，您还可以创建常规的 Vue 页面。

```vue [app/pages/hello.vue]
<template>
  <div>
    <h1>你好</h1>
  </div>
</template>
```

您还可以使用 `definePageMeta` 来更改布局或隐藏默认外壳：

```vue [app/pages/hello.vue]
<script setup lang="ts">
definePageMeta({
  layout: 'default',
  header: false,
  footer: false,
})
</script>
```

## 自定义布局

TockDocs 内置提供：

- `default` — 用于首页和自定义 Vue 页面
- `docs` — 用于文档页面

您可以在 `app/layouts/` 中添加自己的布局：

```vue [app/layouts/custom.vue]
<template>
  <main class="custom-layout">
    <slot />
  </main>
</template>
```

## 层架构的优势

因为 TockDocs 是一个层而非封闭模板，您可以：

- 在 Markdown 中编写文档
- 在需要时覆盖内置组件
- 添加自己的页面和 API
- 安装更多 Nuxt 模块
- 在同一项目中混合营销页面、应用页面和文档

::tip{to="/docs/manual/zh/getting-started/project-structure"}
请参阅项目结构指南，了解传统模式和知识库模式下这一切如何协同工作。
::