Installation

View source

Install and configure the Movk Nuxt module in a Nuxt 4 project.

Using Vue + Vite (non-Nuxt)? See the Vue / Vite mode instructions.

Requirements

Node.js - ^20.19.0 || >=22.12.0
Nuxt - >=4.4.2 (requires Nuxt 4)
Package manager - pnpm / npm / yarn

Add to a Nuxt Project

Install Required Dependencies

Movk Nuxt depends on @nuxt/ui and zod. Make sure they are installed.

If you are using pnpm:

Make sure you set shamefully-hoist=true in your .npmrc file
Or install tailwindcss in the project root directory

pnpm add @movk/nuxt @nuxt/ui zod tailwindcss

npm install @movk/nuxt @nuxt/ui zod tailwindcss

yarn add @movk/nuxt @nuxt/ui zod tailwindcss

Module Configuration

nuxt.config.ts

export default defineNuxtConfig({
+  modules: ['@movk/nuxt']
})

Optional Configuration

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@movk/nuxt'],
  movk: {
    // Component prefix (default: 'M')
    prefix: 'M'
  }
})

TypeScript Support

Movk Nuxt provides full TypeScript type definitions that are automatically injected into your project after installation.

import type { z } from 'zod'

const { afz } = useAutoForm()

const schema = afz.object({
  email: afz.email(), // ✅ Full type hints
  age: afz.number()
})

// Infer data type from schema
type FormData = z.output<typeof schema>

Zod v4 Integration

Movk Nuxt uses Zod v4, which introduces some important API changes:

import { z } from 'zod'

// Use dedicated validation functions
const emailSchema = z.email()
const urlSchema = z.url()
const uuidSchema = z.uuid()
const datetimeSchema = z.iso.datetime()

import { z } from 'zod'

// Do not use old string validation methods
const emailSchema = z.string().email()
const urlSchema = z.string().url()
const uuidSchema = z.string().uuid()

See the official Zod documentation for more v4 changes

Introduction

Explore the core features of Movk Nuxt, its dual mode (Nuxt / Vue + Vite), and layered architecture — from installation to getting started with AutoForm, DataTable, API System and standalone components.

Module Configuration

Configure component prefix, theme colors, fonts, API endpoints, auth strategy, response parsing rules and Toast notification behavior.