---
title: "Nuxt"
description: "学习在 Movk Nuxt Docs 中利用 Nuxt 页面和布局系统，包括创建自定义 Vue 页面、配置 Releases 自动路由与按版本分页的 Releases 页面、Templates 模板展示页，以及内置 default 和 docs 布局的使用方法。"
canonical_url: "https://docs.mhaibaraai.cn/docs/getting-started/nuxt"
---
# Nuxt

> 学习在 Movk Nuxt Docs 中利用 Nuxt 页面和布局系统，包括创建自定义 Vue 页面、配置 Releases 自动路由与按版本分页的 Releases 页面、Templates 模板展示页，以及内置 default 和 docs 布局的使用方法。

## Vue 页面

Movk Nuxt Docs 提供了三个内置页面：

- `pages/index.vue`：首页
- `pages/releases.vue`：发布日志页面
- `pages/templates.vue`：模板展示页
- `pages/docs/[...slug].vue`：文档页面

您可以通过在 `app/pages/` 目录下创建 Vue 文件来添加自定义页面。例如，创建一个简单的 `hello.vue` 页面：

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

## 自动路由

Movk Nuxt Docs 内置了自动路由功能，无需手动扩展页面。系统会自动检测 `content/` 目录下的特定文件并创建对应路由。

### Releases 页面

系统会自动检测 `content/releases.yml` 或 `content/releases.md` 文件，并创建 `/releases` 与 `/releases/:tag` 路由。

> [!TIP]
> 
> 生成 `/releases` 路由后，可以在导航栏中添加链接。
> 
> ```diff [app/composables/useHeader.ts]
> const desktopLinks = computed(() => [{
>   label: '文档',
>   to: '/docs/getting-started',
>   active: route.path.startsWith('/docs/')
> }, {
> +  label: '版本发布',
> +  to: '/releases'
> }])
> ```

页面从 `app.config.ts` 中 `github.owner` / `github.name` 指定的仓库读取 GitHub Releases，每个版本一页：

- `/releases` 展示最新版本，`/releases/v2.3.0` 等路径展示指定版本
- 左侧为按主版本分组的版本导航，右侧为说明正文的目录，底部可切换到相邻版本
- 页面在服务端渲染，可被预渲染与搜索引擎收录；说明中的 `@用户名` 会自动链接到 GitHub 主页

```yaml [content/releases.yml]
title: 版本发布
description: 查看 Movk Nuxt Docs 的版本更新、功能增强与问题修复。
navigation: false
# 可选：在版本导航中列出预发布版本
prerelease: false
# 可选：版本导航只列出 tag 匹配该正则的版本
include: '^v2\.'
```

> [!NOTE]
> 
> 数据经服务端缓存 1 小时。建议配置 
> 
> NUXT_GITHUB_TOKEN
> 
>  以避免匿名请求的频率限制；GitHub 不可达时页面显示提示而不会报错。被 
> 
> prerelease
> 
>  / 
> 
> include
> 
>  筛掉的版本不会出现在导航中，但仍可通过其 tag 路径直接访问。

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/templates/releases.vue)

### Templates 页面 `v2+`

系统会自动检测 `content/templates.yml` 或 `content/templates.md` 文件，并创建 `/templates` 路由，用于以卡片形式展示模板或真实案例站点。

> [!TIP]
> 
> 生成 `/templates` 路由后，可以在导航栏中添加链接。
> 
> ```diff [app/composables/useHeader.ts]
> const desktopLinks = computed(() => [{
>   label: '文档',
>   to: '/docs/getting-started',
>   active: route.path.startsWith('/docs/')
> }, {
> +  label: '案例',
> +  to: '/templates'
> }])
> ```

每个 `items` 条目支持 `title`、`description`、`features`（带图标的特性列表）与 `links`（普通链接按钮）。

```yaml [content/templates.yml]
title: 案例展示
description: 这些站点均由 Movk Nuxt Docs 构建，展示该主题在真实项目中的应用。
navigation: false
hero:
  title: 案例展示
  description: 这些站点均由 Movk Nuxt Docs 构建，展示该主题在真实项目中的应用。
items:
  - title: mhaibaraai.cn
    description: 技术博客和知识库站点。
    features:
      - title: 技术博客
        icon: i-lucide-notebook
      - title: 知识库
        icon: i-lucide-library
    links:
      - label: 访问站点
        to: https://mhaibaraai.cn
        target: _blank
        icon: i-lucide-link
```

> [!NOTE]
> 
> 截图约定：
> 
> 
> 卡片右侧截图按 
> 
> /assets/templates/{slug}-light.png
> 
>  与 
> 
> /assets/templates/{slug}-dark.png
> 
>  约定加载，
> 
> slug
> 
>  由 
> 
> title
> 
>  转换而来（小写、非字母数字转 
> 
> -
> 
> ）。例如 
> 
> @movk/core
> 
>  对应 
> 
> movk-core-light.png
> 
>  / 
> 
> movk-core-dark.png
> 
> ，请放置于 
> 
> public/assets/templates/
> 
>  目录。系统优先查找 
> 
> templates.md
> 
> ，不存在时使用 
> 
> templates.yml
> 
> 。

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/templates/templates.vue)

### 自定义页面

如果需要完全自定义的页面，可以在 `app/pages/` 目录下创建 Vue 文件：

```vue [app/pages/custom.vue]
<script setup lang="ts">
definePageMeta({
  layout: 'default',
  header: false,  // 隐藏头部
  footer: false   // 隐藏页脚
})
</script>

<template>
  <div>
    <!-- 自定义页面内容 -->
  </div>
</template>
```

## 布局

Movk Nuxt Docs 提供了两个内置布局：

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

[](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/layouts/docs.vue)

如果您想使用不同的布局，可以在 `app/layouts/` 目录下创建。

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


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.