---
title: "Nuxt"
description: "学习在 Movk Nuxt Docs 中利用 Nuxt 页面和布局系统，包括创建自定义 Vue 页面、配置 Releases 自动路由、三种 Releases 页面模式（YAML/Markdown/混合）、Templates 模板展示页，以及内置 default 和 docs 布局的使用方法。"
seo_title: "Nuxt"
seo_description: "Learn how Movk Nuxt Docs uses Nuxt pages, layouts, releases routes, Markdown and YAML release modes, the templates showcase page, and custom Vue pages."
canonical_url: "https://docs.mhaibaraai.cn/docs/getting-started/nuxt"
---
# Nuxt

> 学习在 Movk Nuxt Docs 中利用 Nuxt 页面和布局系统，包括创建自定义 Vue 页面、配置 Releases 自动路由、三种 Releases 页面模式（YAML/Markdown/混合）、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` 路由。

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

**Releases** 页面支持三种使用模式：

#### 1\. 自动获取模式 (YAML/Markdown)

仅配置 API 地址，自动从 GitHub 获取发布记录。

```yaml [content/releases.yml]
title: 版本发布
description: 查看 Movk Nuxt Docs 的版本更新、功能增强与问题修复。
navigation: false
releases: https://ungh.cc/repos/mhaibaraai/movk-nuxt-docs/releases
hero:
  title: 版本发布
  description: 查看 Movk Nuxt Docs 的版本更新、功能增强与问题修复。
  links:
    - label: 在 GitHub 上标星
      color: neutral
      variant: outline
      to: https://github.com/mhaibaraai/movk-nuxt-docs
      target: _blank
      icon: i-lucide-star
```

#### 2\. 自定义内容模式 (Markdown)

使用 Markdown 手动编写发布说明，不依赖外部 API。

```md [content/releases.md]
---
title: 自定义发布日志
description: 手动维护的更新记录
---

## 1.8.0 (2026-01-21)

[查看完整变更](https://github.com/mhaibaraai/movk-nuxt-docs/compare/v1.7.5...v1.8.0)

### ✨ Features

* **图表渲染：** 添加 Mermaid 图表支持 ([bc8c35a](https://github.com/mhaibaraai/movk-nuxt-docs/commit/bc8c35a))
  - 支持流程图、时序图、类图、状态图、饼图、甘特图、实体关系图等
  - 自动主题切换（深色/浅色模式）和懒加载优化
  - 支持复制代码、全屏查看功能

### 📦 Build System

* 添加 mermaid 依赖 ([bc8c35a](https://github.com/mhaibaraai/movk-nuxt-docs/commit/bc8c35a8795c405b7653bb820536ebc4c1d267e8))
```

#### 3\. 混合模式 (Markdown + API)

同时显示自定义 Markdown 内容和自动获取的发布列表。Markdown 内容将显示在列表上方。

```md [content/releases.md]
---
title: 混合模式更新日志
description: 自定义内容与自动获取的结合
navigation: false
releases: https://ungh.cc/repos/mhaibaraai/movk-nuxt-docs/releases
hero:
  title: 版本发布
  description: 查看 Movk Nuxt Docs 的版本更新、功能增强与问题修复。
---

## 欢迎查看更新

以下是手动维护的发布日志，记录了 Movk Nuxt Docs 的最新变化和改进。
```

> \[\!NOTE\]
> 
> 优先级说明：
> 
> 
> 系统优先查找 
> 
> releases.md
> 
> ，不存在时使用 
> 
> releases.yml
> 
> 。
> 
> releases
> 
>  (API URL) 和 
> 
> hero
> 
>  字段均为可选。

[](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](/sitemap.md) for all pages.