Nuxt

View source
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:

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.

After the /releases route is generated, you can add a link in the navigation bar.
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.

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.

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.

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.
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.
View the releases template source code

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.

After the /templates route is generated, you can add a link in the navigation bar.
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).

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
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.
View the templates template source code

Custom pages

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

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
Default layout code

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

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

Customization

Override built-in components by creating Vue files of the same name in the components/ directory. A complete customization guide covering every interface area, including the header logo, desktop navigation menu, mobile drawer, footer, left/right sidebar slots, and the theme picker, with links to the default component source code.

Deploy to production

Build and deploy Movk Nuxt Docs to Vercel or other hosting platforms, with details on the pnpm build command, the NUXT_GITHUB_TOKEN and AI_GATEWAY_API_KEY environment variables, and how Nitro automatically adapts to multi-platform deployment.

Copyright © 2024 - 2026