---
title: "Nuxt"
description: "Learn how to take advantage of the Nuxt pages and layouts system in Movk Nuxt Docs, including creating custom Vue pages, configuring automatic Releases routing, the three Releases page modes (YAML / Markdown / hybrid), the Templates showcase page, and how to use the built-in default and docs layouts."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/getting-started/nuxt"
---
# Nuxt

> Learn how to take advantage of the Nuxt pages and layouts system in Movk Nuxt Docs, including creating custom Vue pages, configuring automatic Releases routing, the three Releases page modes (YAML / Markdown / hybrid), the Templates showcase page, and how to use the built-in default and docs layouts.

## Vue pages

Movk Nuxt Docs provides three built-in pages:

- `pages/index.vue`: the home page
- `pages/releases.vue`: the release notes page
- `pages/templates.vue`: the templates showcase page
- `pages/docs/[...slug].vue`: documentation pages

You can add custom pages by creating Vue files in the `app/pages/` directory. For example, to create a simple `hello.vue` page:

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

## Automatic routing

Movk Nuxt Docs includes automatic routing, with no need to extend pages manually. The system automatically detects specific files in the `content/` directory and creates the corresponding routes.

### Releases page

The system automatically detects the `content/releases.yml` or `content/releases.md` file and creates the `/releases` route.

> [!TIP]
> 
> After the `/releases` route is generated, you can add a link in the navigation bar.
> 
> ```diff [app/composables/useHeader.ts]
> const desktopLinks = computed(() => [{
>   label: 'Docs',
>   to: '/docs/getting-started',
>   active: route.path.startsWith('/docs/')
> }, {
> +  label: 'Releases',
> +  to: '/releases'
> }])
> ```

The **Releases** page supports three usage modes:

#### 1. Auto-fetch mode (YAML/Markdown)

Configure only the API URL to automatically fetch release records from GitHub.

```yaml [content/releases.yml]
title: Releases
description: See version updates, feature enhancements, and bug fixes for Movk Nuxt Docs.
navigation: false
releases: https://ungh.cc/repos/mhaibaraai/movk-nuxt-docs/releases
hero:
  title: Releases
  description: See version updates, feature enhancements, and bug fixes for Movk Nuxt Docs.
  links:
    - label: Star on GitHub
      color: neutral
      variant: outline
      to: https://github.com/mhaibaraai/movk-nuxt-docs
      target: _blank
      icon: i-lucide-star
```

#### 2. Custom content mode (Markdown)

Write release notes manually with Markdown, without relying on an external API.

```md [content/releases.md]
---
title: Custom changelog
description: A manually maintained changelog
---

## 1.8.0 (2026-01-21)

[View the full changelog](https://github.com/mhaibaraai/movk-nuxt-docs/compare/v1.7.5...v1.8.0)

### ✨ Features

* **Diagram rendering:** add Mermaid diagram support ([bc8c35a](https://github.com/mhaibaraai/movk-nuxt-docs/commit/bc8c35a))
  - Supports flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Gantt charts, entity-relationship diagrams, and more
  - Automatic theme switching (dark/light mode) and lazy-loading optimization
  - Supports copying code and full-screen viewing

### 📦 Build System

* add the mermaid dependency ([bc8c35a](https://github.com/mhaibaraai/movk-nuxt-docs/commit/bc8c35a8795c405b7653bb820536ebc4c1d267e8))
```

#### 3. Hybrid mode (Markdown + API)

Display both custom Markdown content and an auto-fetched release list. The Markdown content appears above the list.

```md [content/releases.md]
---
title: Hybrid changelog
description: A combination of custom content and auto-fetched releases
navigation: false
releases: https://ungh.cc/repos/mhaibaraai/movk-nuxt-docs/releases
hero:
  title: Releases
  description: See version updates, feature enhancements, and bug fixes for Movk Nuxt Docs.
---

## Welcome to the changelog

Below is a manually maintained changelog recording the latest changes and improvements to Movk Nuxt Docs.
```

> [!NOTE]
> 
> Priority:
> 
> 
> The system looks for 
> 
> releases.md
> 
>  first, falling back to 
> 
> releases.yml
> 
>  if it does not exist. The 
> 
> releases
> 
>  (API URL) and 
> 
> hero
> 
>  fields are both optional.

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

### Templates page `v2+`

The system automatically detects the `content/templates.yml` or `content/templates.md` file and creates the `/templates` route, used to showcase templates or real-world case study sites as cards.

> [!TIP]
> 
> After the `/templates` route is generated, you can add a link in the navigation bar.
> 
> ```diff [app/composables/useHeader.ts]
> const desktopLinks = computed(() => [{
>   label: 'Docs',
>   to: '/docs/getting-started',
>   active: route.path.startsWith('/docs/')
> }, {
> +  label: 'Showcase',
> +  to: '/templates'
> }])
> ```

Each `items` entry supports `title`, `description`, `features` (a feature list with icons), and `links` (regular link buttons).

```yaml [content/templates.yml]
title: Showcase
description: These sites are all built with Movk Nuxt Docs, demonstrating the theme in real-world projects.
navigation: false
hero:
  title: Showcase
  description: These sites are all built with Movk Nuxt Docs, demonstrating the theme in real-world projects.
items:
  - title: mhaibaraai.cn
    description: Technical blog and knowledge base site.
    features:
      - title: Technical blog
        icon: i-lucide-notebook
      - title: Knowledge base
        icon: i-lucide-library
    links:
      - label: Visit site
        to: https://mhaibaraai.cn
        target: _blank
        icon: i-lucide-link
```

> [!NOTE]
> 
> Screenshot convention:
> 
> 
> The screenshot on the right side of each card is loaded by the 
> 
> /assets/templates/{slug}-light.png
> 
>  and 
> 
> /assets/templates/{slug}-dark.png
> 
>  convention, where 
> 
> slug
> 
>  is derived from 
> 
> title
> 
>  (lowercased, with non-alphanumeric characters converted to 
> 
> -
> 
> ). For example, 
> 
> @movk/core
> 
>  maps to 
> 
> movk-core-light.png
> 
>  / 
> 
> movk-core-dark.png
> 
> ; place these in the 
> 
> public/assets/templates/
> 
>  directory. The system looks for 
> 
> templates.md
> 
>  first, falling back to 
> 
> templates.yml
> 
>  if it does not exist.

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

### Custom pages

If you need a fully custom page, you can create a Vue file in the `app/pages/` directory:

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

<template>
  <div>
    <!-- Custom page content -->
  </div>
</template>
```

## Layouts

Movk Nuxt Docs provides two built-in layouts:

- The `default` layout: used for the home page and custom Vue pages
- The `docs` layout: used for documentation pages

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

If you want to use a different layout, you can create one in the `app/layouts/` directory.

```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.