在 Nuxt 4 项目中安装和配置 Movk Nuxt 模块
环境要求
- Node.js -
^20.x || ^22.x - Nuxt -
^4.2.0（需要 Nuxt 4） - 包管理器 - pnpm / npm / yarn
添加到 Nuxt 项目
安装所需依赖
@movk/nuxt 依赖 @nuxt/ui 和 zod，请确保已安装。如果你使用的是 pnpm，请确保你在
.npmrc 文件中设置 shamefully-hoist=true ，或者在项目的根目录中安装 tailwindcss 。pnpm add @movk/nuxt @nuxt/ui zod
npm install @movk/nuxt @nuxt/ui zod
yarn add @movk/nuxt @nuxt/ui zod
模块配置
在 nuxt.config.ts 中注册模块：
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@movk/nuxt']
})
可选配置
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@movk/nuxt'],
movk: {
// 组件前缀 (默认: 'M')
prefix: 'M'
}
})
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
prefix | string | 'M' | 全局组件前缀，如 MAutoForm、MDatePicker 等 |
TypeScript 支持
Movk Nuxt 提供完整的 TypeScript 类型定义，安装后自动注入到项目中。
import type { z } from 'zod/v4'
const { afz } = useAutoForm()
const schema = afz.object({
email: afz.email(), // ✅ 完整的类型提示
age: afz.number()
})
// 从 schema 推断数据类型
type FormData = z.output<typeof schema>
Zod v4 集成
Movk Nuxt 使用 Zod v4，它引入了一些重要的 API 变更：
import { z } from 'zod/v4'
// 使用专用验证函数
const emailSchema = z.email()
const urlSchema = z.url()
const uuidSchema = z.uuid()
const datetimeSchema = z.iso.datetime()
import { z } from 'zod'
// 不要使用旧的字符串验证方法
const emailSchema = z.string().email()
const urlSchema = z.string().url()
const uuidSchema = z.string().uuid()