Nuxt 4 模块化工程套件

基于 Nuxt UI 和 Zod v4 构建，把表单、表格、API、主题与交互四类高频需求收敛为开箱即用的模块能力：Schema 驱动的 AutoForm、功能完备的 DataTable、带认证与进度追踪的 API 系统，以及独立组件与通用 Composables。

快速入门查看源码

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 流畅动画 · 可配置验证阈值

请向右滑动验证

带复制功能

WithCopy

密码切换

WithPasswordToggle

带清除功能

WithClear

字符计数

WithCharacterLimit

0/30

浮动标签

WithFloatingLabel

用户名

电话格式

AsPhoneNumberInput

+86

核心特性

模块化设计，渐进式采用，从简单的工具函数到完整的自动化系统，满足各种开发需求。

AutoForm 表单引擎

通过 Zod Schema 定义数据结构，自动生成完整的表单界面、验证逻辑与布局。

DataTable 数据表格

数据列、特殊列、树形数据、行交互、外观定制与分页加载，声明式列配置驱动。

API 集成系统

useApiFetch 三件套与上传/下载进度，内置多端点、认证、业务码校验与 Toast。

组件与 Composables

DatePicker、PillGroup、SearchForm 等独立组件，搭配 useTheme、useMessageBox 等工具。

类型安全

完整的 TypeScript 类型推断，prop 回调与事件处理类型可索引访问派生。

AI 友好

内置 MCP Server 与 llms.txt，组件、composable 与文档可被 AI 智能体检索。

Schema 即表单

用 Zod v4 描述数据结构，AutoForm 自动渲染控件、绑定校验、组织布局，并通过元数据精细控制每个字段的外观与条件显隐。

Schema 驱动

afz 工厂在 Zod 之上扩展控件类型与元数据，一份 Schema 同时承载数据约束与界面定义。

内建校验

字段约束直接来自 Zod，提交即校验，错误信息可逐字段自定义。

布局与条件渲染

layout 分组排版，meta.if 按表单状态联动显隐，复杂表单也保持声明式。

查看 AutoForm 文档

<script setup lang="ts">
import type { z } from 'zod'

const { afz } = useAutoForm()

const schema = afz.object({
  username: afz.string('请填写用户名').min(3).max(20),
  age: afz.number().min(18, '年龄必须大于 18 岁').max(99),
  role: afz.enum(['管理员', '编辑', '访客'] as const)
    .meta({ label: '角色', placeholder: '选择角色' }),
  email: afz.email({ error: '请输入有效的邮箱地址' })
})

type Schema = z.output<typeof schema>

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

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

声明式数据表格

用一份列配置描述表格的列、对齐、排序与单元格渲染，DataTable 负责选择列、固定列、列宽拖拽、树形数据与分页等完整能力。

列配置驱动

accessorKey、header、size、align、cell 一处定义，数据列与特殊列统一描述。

特殊列与树形

内建选择列、展开列、序号列，支持树形数据与级联选择策略。

交互能力

排序、列固定、列宽拖拽、可见性控制与分页加载，按 prop 开关。

查看 DataTable 文档

<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: '姓名', size: 120 },
  { accessorKey: 'role', header: '岗位', size: 140 },
  {
    accessorKey: 'salary',
    header: '薪资',
    align: 'right',
    cell: ({ getValue }) => `¥${getValue<number>().toLocaleString()}`
  }
]
</script>

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

开箱即用的 API 集成

useApiFetch 在 Nuxt useFetch 之上封装多端点切换、认证注入、业务状态码校验、数据解包与统一 Toast，配置一次即可在全应用复用。

多端点

按名称声明多个端点，各自独立配置 baseURL、认证、Toast 与响应规则。

认证与业务码

请求自动注入 Token，响应自动校验业务状态码并解包数据。

统一 Toast 与进度

成功与错误提示统一处理，配套上传/下载进度 composable。

查看 API 文档

// SSR + CSR，首屏直出数据
const { data, status, error } = await useApiFetch<User[]>('/users')

// 切换端点 + 数据解包
const { data: profile } = await useApiFetch('/profile', {
  endpoint: 'admin'
})

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

组件与 Composables

DatePicker、SearchForm、PillGroup、SlideVerify 等独立组件即取即用，搭配 useTheme、useMessageBox、useDateFormatter 等命令式工具覆盖常见交互场景。

独立组件

日期选择、颜色选择、滑动验证、星级评分与输入增强，无需额外封装。

命令式工具

useMessageBox 弹窗、useTheme 读写主题、useDateFormatter 格式化日期。

运行时主题

颜色、圆角、字体、图标集与明暗模式可在运行时切换，配套 ThemePicker。

浏览组件浏览 Composables

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

// 命令式弹窗
const { confirm } = useMessageBox()
await confirm({ type: 'warning', title: '确认删除？' })

// 读写运行时主题
const { primary, mode } = useTheme()

为 AI 智能体而生

模块内置 MCP Server 与 llms.txt，组件 API、composable 与文档都能被 AI 智能体检索与调用，让 AI 辅助开发更精准。

MCP Server

通过 Model Context Protocol 暴露组件、composable 与示例，供智能体实时查询。

llms.txt

生成结构化的 llms.txt，让大模型快速理解模块能力与文档结构。

可检索文档

组件、composable 与示例统一编入索引，AI 辅助开发引用更准确。

配置 MCP Server 了解 llms.txt

开始构建你的下一个 Nuxt 应用

从一份 Schema 到完整的表单、表格与 API 集成，Movk Nuxt 帮你把高频需求收敛为开箱即用的模块能力。

Star on GitHub 快速入门