---
canonical_url: "https://nuxt.mhaibaraai.cn/en"
---
<u-page-hero className="dark:bg-gradient-to-b,from-neutral-900,to-neutral-950" orientation="horizontal">
<template v-slot:top="">
<hero-background>



</hero-background>
</template>

<template v-slot:title="">
<motion>

UI Engineering Suite Built on Nuxt UI

</motion>
</template>

<template v-slot:description="">
<motion :transition="{"duration":0.6,"delay":0.3}">

A UI engineering suite built on Nuxt UI and Zod v4: schema-driven AutoForm, a fully-featured DataTable, standalone components and composables. Get complete capabilities in Nuxt 4 including API integration with auth and progress tracking; its UI, forms, tables and theming can also be used directly in plain Vue + Vite projects via a Vite plugin (API integration domain is Nuxt-only).

</motion>
</template>

<template v-slot:links="">
<motion :transition="{"duration":0.6,"delay":0.5}" className="flex,flex-wrap,gap-x-6,gap-y-3">

[](https://nuxt.mhaibaraai.cn/docs/getting-started)

[](https://github.com/mhaibaraai/movk-nuxt)

</motion>
</template>

<home>



</home>
</u-page-hero>

<u-page-section className="dark:bg-neutral-950">
<template v-slot:title="">

Core Features

</template>

<template v-slot:description="">

Modular design, progressive adoption — from simple utility functions to complete automation systems, meeting all kinds of development needs.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-zap">
<template v-slot:title="">

AutoForm Engine

</template>

<template v-slot:description="">

Define data structures with a Zod Schema and automatically generate complete form interfaces, validation logic and layout.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-table">
<template v-slot:title="">

DataTable

</template>

<template v-slot:description="">

Data columns, special columns, tree data, row interaction, appearance customization and pagination — all driven by declarative column configuration.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-cloud">
<template v-slot:title="">

API Integration System (Nuxt only)

</template>

<template v-slot:description="">

The useApiFetch trio with upload/download progress, built-in multi-endpoint, auth, business code validation and Toast; requires Nuxt server runtime.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-blocks">
<template v-slot:title="">

Nuxt / Vue Dual Mode

</template>

<template v-slot:description="">

Both a Nuxt module and a provider of @movk/nuxt/vite + vue-plugin, making the UI layer directly available in plain Vue + Vite projects.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-package">
<template v-slot:title="">

Components & Composables

</template>

<template v-slot:description="">

DatePicker, PillGroup, SearchForm, Tree and other standalone components, paired with useTheme, useMessageBox and other utilities.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-shield-check">
<template v-slot:title="">

Type Safe

</template>

<template v-slot:description="">

Full TypeScript type inference; prop callbacks and event handler types can be derived via index access.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-sparkles">
<template v-slot:title="">

AI Friendly

</template>

<template v-slot:description="">

Built-in MCP Server and llms.txt; components, composables and docs can be retrieved by AI agents.

</template>
</u-page-feature>
</template>
</u-page-section>

<u-page-section :links="[{"label":"View AutoForm Docs","to":"/docs/auto-form","color":"neutral","variant":"outline","trailingIcon":"i-lucide-arrow-right"}]" orientation="horizontal">
<template v-slot:title="">

Schema as Form

</template>

<template v-slot:description="">

Describe your data structure with Zod v4, and AutoForm automatically renders controls, binds validation and organizes layout — with fine-grained control over each field's appearance and conditional visibility through metadata.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-binary">
<template v-slot:title="">

Schema Driven

</template>

<template v-slot:description="">

The afz factory extends Zod with control types and metadata, so one Schema carries both data constraints and UI definitions.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-shield-check">
<template v-slot:title="">

Built-in Validation

</template>

<template v-slot:description="">

Field constraints come directly from Zod; validation fires on submit, and error messages can be customized per field.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-layout-panel-left">
<template v-slot:title="">

Layout & Conditional Rendering

</template>

<template v-slot:description="">

Group fields with layout, conditionally show/hide with meta.if based on form state — complex forms stay declarative.

</template>
</u-page-feature>
</template>

```vue [AutoForm.vue]
<script setup lang="ts">
import type { z } from 'zod'

const { afz } = useAutoForm()

const schema = afz.object({
  username: afz.string('Please enter a username').min(3).max(20),
  age: afz.number().min(18, 'Age must be at least 18').max(99),
  role: afz.enum(['Admin', 'Editor', 'Viewer'] as const)
    .meta({ label: 'Role', placeholder: 'Select role' }),
  email: afz.email({ error: 'Please enter a valid email address' })
})

type Schema = z.output<typeof schema>

const state = ref<Partial<Schema>>({})
</script>

<template>
  <MAutoForm :schema="schema" :state="state" />
</template>
```

</u-page-section>

<u-page-section :links="[{"label":"View DataTable Docs","to":"/docs/data-table","color":"neutral","variant":"outline","trailingIcon":"i-lucide-arrow-right"}]" orientation="horizontal" :reverse="true">
<template v-slot:title="">

Declarative Data Table

</template>

<template v-slot:description="">

Describe your table's columns, alignment, sorting and cell rendering with a single column configuration — DataTable handles selection columns, pinned columns, resizable columns, tree data, pagination and more.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-columns-3">
<template v-slot:title="">

Column Configuration Driven

</template>

<template v-slot:description="">

Define accessorKey, header, size, align and cell in one place; data columns and special columns share a unified descriptor.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-list-tree">
<template v-slot:title="">

Special Columns & Tree Data

</template>

<template v-slot:description="">

Built-in selection, expand and index columns; supports tree data and cascading selection strategies.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-move-horizontal">
<template v-slot:title="">

Interactive Capabilities

</template>

<template v-slot:description="">

Sorting, column pinning, column resizing, visibility control and paginated loading — all toggled via props.

</template>
</u-page-feature>
</template>

```vue [DataTable.vue]
<script setup lang="ts">
import type { DataTableColumn } from '@movk/nuxt'

interface Member {
  id: string
  name: string
  role: string
  salary: number
}

const data = ref<Member[]>([])

const columns: DataTableColumn<Member>[] = [
  { type: 'selection' },
  { accessorKey: 'name', header: 'Name', size: 120 },
  { accessorKey: 'role', header: 'Role', size: 140 },
  {
    accessorKey: 'salary',
    header: 'Salary',
    align: 'right',
    cell: ({ getValue }) => `$${getValue<number>().toLocaleString()}`
  }
]
</script>

<template>
  <MDataTable :columns="columns" :data="data" sortable pinable resizable />
</template>
```

</u-page-section>

<u-page-section :links="[{"label":"View API Docs","to":"/docs/api","color":"neutral","variant":"outline","trailingIcon":"i-lucide-arrow-right"}]" orientation="horizontal">
<template v-slot:title="">

Out-of-the-Box API Integration

</template>

<template v-slot:description="">

useApiFetch wraps Nuxt's useFetch with multi-endpoint switching, auth injection, business status code validation, data unwrapping and unified Toast — configure once and reuse across the entire app.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-layers">
<template v-slot:title="">

Multi-Endpoint

</template>

<template v-slot:description="">

Declare multiple named endpoints, each independently configured with its own baseURL, auth, Toast and response rules.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-key-round">
<template v-slot:title="">

Auth & Business Codes

</template>

<template v-slot:description="">

Requests automatically inject tokens; responses automatically validate business status codes and unwrap data.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-bell">
<template v-slot:title="">

Unified Toast & Progress

</template>

<template v-slot:description="">

Success and error notifications handled uniformly, with companion upload/download progress composables.

</template>
</u-page-feature>
</template>

```ts [component.vue]
// SSR + CSR, data available on first render
const { data, status, error } = await useApiFetch<User[]>('/users')

// Switch endpoint + data unwrapping
const { data: profile } = await useApiFetch('/profile', {
  endpoint: 'admin'
})
```

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  movk: {
    api: {
      endpoints: {
        default: { baseURL: '/api' },
        admin: {
          baseURL: '/admin-api',
          auth: { tokenType: 'Bearer' }
        }
      }
    }
  }
})
```

</u-page-section>

<u-page-section :links="[{"label":"Browse Components","to":"/docs/components","color":"neutral","variant":"outline","trailingIcon":"i-lucide-arrow-right"},{"label":"Browse Composables","to":"/docs/composables","color":"neutral","variant":"ghost","trailingIcon":"i-lucide-arrow-right"}]" orientation="horizontal" :reverse="true">
<template v-slot:title="">

Components & Composables

</template>

<template v-slot:description="">

Standalone components like DatePicker, SearchForm, PillGroup, SlideVerify and Tree are ready to use out of the box, paired with imperative utilities like useTheme, useMessageBox and useDateFormatter for common interaction patterns.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-blocks">
<template v-slot:title="">

Standalone Components

</template>

<template v-slot:description="">

Date picking, color choosing, slide verification, tree structures and input enhancements — no extra wrapping required.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-square-function">
<template v-slot:title="">

Imperative Utilities

</template>

<template v-slot:description="">

useMessageBox dialogs, useTheme for reading and writing theme state, useDateFormatter for date formatting.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-palette">
<template v-slot:title="">

Runtime Theming

</template>

<template v-slot:description="">

Colors, radius, icon sets and light/dark mode can be switched at runtime, with a companion ThemePicker.

</template>
</u-page-feature>
</template>

```vue [Components.vue]
<template>
  <MDatePicker v-model="date" />
  <MColorChooser v-model="color" />
  <MSlideVerify v-model="verified" />
</template>
```

```ts [composables.ts]
// Imperative dialog
const { confirm } = useMessageBox()
await confirm({ type: 'warning', title: 'Confirm delete?' })

// Read and write runtime theme
const { primary, mode } = useTheme()
```

</u-page-section>

<u-page-section :links="[{"label":"Configure MCP Server","to":"/docs/getting-started/ai/mcp","color":"neutral","variant":"outline","trailingIcon":"i-lucide-arrow-right"},{"label":"Learn about llms.txt","to":"/docs/getting-started/ai/llms-txt","color":"neutral","variant":"ghost","trailingIcon":"i-lucide-arrow-right"}]">
<template v-slot:title="">

Built for AI Agents

</template>

<template v-slot:description="">

The module ships with a built-in MCP Server and llms.txt — component APIs, composables and docs can all be retrieved and called by AI agents, making AI-assisted development more precise.

</template>

<template v-slot:features="">
<u-page-feature icon="i-lucide-plug">
<template v-slot:title="">

MCP Server

</template>

<template v-slot:description="">

Exposes components, composables and examples via the Model Context Protocol for agents to query in real time.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-file-text">
<template v-slot:title="">

llms.txt

</template>

<template v-slot:description="">

Generates structured llms.txt so large language models can quickly understand module capabilities and documentation structure.

</template>
</u-page-feature>

<u-page-feature icon="i-lucide-search">
<template v-slot:title="">

Searchable Docs

</template>

<template v-slot:description="">

Components, composables and examples are uniformly indexed for more accurate AI-assisted development references.

</template>
</u-page-feature>
</template>
</u-page-section>

<u-page-c-t-a :links="[{"label":"Star on GitHub","to":"https://github.com/mhaibaraai/movk-nuxt","target":"_blank","icon":"i-lucide-star","color":"neutral"},{"label":"Get Started","to":"/docs/getting-started","color":"neutral","variant":"outline","trailingIcon":"i-lucide-arrow-right"}]" className="dark:bg-neutral-950">
<template v-slot:title="">

Start Building Your Next Nuxt App

</template>

<template v-slot:description="">

From a single Schema to complete forms, tables and API integration — Movk Nuxt helps you consolidate high-frequency requirements into ready-to-use module capabilities.

</template>
</u-page-c-t-a>

## Resources for Agents

- [API catalog: every service document this site publishes](https://nuxt.mhaibaraai.cn/.well-known/api-catalog)
- [Sitemap (XML)](https://nuxt.mhaibaraai.cn/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://nuxt.mhaibaraai.cn/sitemap.md)
- [MCP server card: MCP endpoint at https://nuxt.mhaibaraai.cn/mcp](https://nuxt.mhaibaraai.cn/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://nuxt.mhaibaraai.cn/mcp)
- [llms.txt: index of the documentation for LLMs](https://nuxt.mhaibaraai.cn/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://nuxt.mhaibaraai.cn/llms-full.txt)
- [Agent skills index: every skill published by this site](https://nuxt.mhaibaraai.cn/.well-known/skills/index.json)
- [Agent skill: movk-nuxt](https://nuxt.mhaibaraai.cn/.well-known/skills/movk-nuxt/SKILL.md)
- [Documentation](https://nuxt.mhaibaraai.cn/docs)
- [Homepage](https://nuxt.mhaibaraai.cn/raw/index.md)


## Sitemap

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