---
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 per-release Releases pages, 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 per-release Releases pages, 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` and `/releases/:tag` routes.

> [!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 page reads GitHub Releases from the repository set by `github.owner` / `github.name` in `app.config.ts`, one page per release:

- `/releases` shows the latest release, paths such as `/releases/v2.3.0` show a specific one
- The left aside lists the versions grouped by major version, the right one holds the table of contents of the notes, and the bottom links to the adjacent releases
- Pages are server-rendered, so they can be prerendered and indexed; `@username` mentions in the notes link to GitHub profiles

```yaml [content/releases.yml]
title: Releases
description: View version updates, feature enhancements, and bug fixes of Movk Nuxt Docs.
navigation: false
# Optional: list prereleases in the version navigation
prerelease: false
# Optional: only list tags matching this regular expression
include: '^v2\.'
```

> [!NOTE]
> 
> Data is cached on the server for one hour. Setting 
> 
> NUXT_GITHUB_TOKEN
> 
>  is recommended to avoid the rate limit of anonymous requests; when GitHub is unreachable the page shows a notice instead of failing. Releases filtered out by 
> 
> prerelease
> 
>  / 
> 
> include
> 
>  are hidden from the navigation but remain reachable through their tag path.

[](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.