UI Engineering Suite Built on Nuxt UI

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

Get Started View Source

AutoForm

Live Demo

姓名	岗位	职级	薪资
张伟	前端工程师	P7	¥42,000
李娜	UI 设计师	P6	¥36,000
王强	产品经理	P7	¥45,000
陈静	后端工程师	P6	¥38,000
刘洋	数据分析师	P5	¥28,000

日期选择器

MDatePicker

日期 / 范围 / 多选 · 多种格式输出

颜色选择器

MColorChooser

RGB · HEX · HSL · Popover 触发

#3B82F6

滑动验证

MSlideVerify

Motion.js 流畅动画 · 可配置验证阈值

请向右滑动验证

树形组件

MTree

搜索过滤 · 懒加载 · 工具栏 · 复选框级联

带复制功能

WithCopy

密码切换

WithPasswordToggle

带清除功能

WithClear

字符计数

WithCharacterLimit

0/30

浮动标签

WithFloatingLabel

用户名

电话格式

AsPhoneNumberInput

+86

Core Features

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

AutoForm Engine

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

DataTable

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

API Integration System (Nuxt only)

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

Nuxt / Vue Dual Mode

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

Components & Composables

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

Type Safe

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

AI Friendly

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

Schema as Form

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.

Schema Driven

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

Built-in Validation

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

Layout & Conditional Rendering

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

View AutoForm Docs

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

Declarative Data Table

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.

Column Configuration Driven

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

Special Columns & Tree Data

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

Interactive Capabilities

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

View DataTable Docs

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

Out-of-the-Box API Integration

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.

Multi-Endpoint

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

Auth & Business Codes

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

Unified Toast & Progress

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

View API Docs

// 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'
})

export default defineNuxtConfig({
  movk: {
    api: {
      endpoints: {
        default: { baseURL: '/api' },
        admin: {
          baseURL: '/admin-api',
          auth: { tokenType: 'Bearer' }
        }
      }
    }
  }
})

Components & Composables

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.

Standalone Components

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

Imperative Utilities

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

Runtime Theming

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

Browse Components Browse Composables

<template>
  <MDatePicker v-model="date" />
  <MColorChooser v-model="color" />
  <MSlideVerify v-model="verified" />
</template>

// Imperative dialog
const { confirm } = useMessageBox()
await confirm({ type: 'warning', title: 'Confirm delete?' })

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

Built for AI Agents

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.

MCP Server

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

llms.txt

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

Searchable Docs

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

Configure MCP Server Learn about llms.txt

Start Building Your Next Nuxt App

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.

Star on GitHub Get Started