---
title: "Installation"
description: "Install and configure the Movk Nuxt module in a Nuxt 4 project."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/getting-started/installation"
---
# Installation

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

> [!NOTE]
> See: /docs/getting-started/vue
> 
> Using 
> 
> Vue + Vite
> 
>  (non-Nuxt)? See the Vue / Vite mode instructions.

## Requirements

> [!NOTE]
> 
> - **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

> [!WARNING]
> 
> Movk Nuxt
> 
>  depends on 
> 
> @nuxt/ui
> 
>  and 
> 
> zod
> 
> . Make sure they are installed.

> [!WARNING]
> 
> If you are using pnpm:
> 
> - Make sure you set `shamefully-hoist=true` in your `.npmrc` file
> - Or install `tailwindcss` in the project root directory

```bash [pnpm]
pnpm add @movk/nuxt @nuxt/ui zod tailwindcss
```

```bash [npm]
npm install @movk/nuxt @nuxt/ui zod tailwindcss
```

```bash [yarn]
yarn add @movk/nuxt @nuxt/ui zod tailwindcss
```

### Module Configuration

Register the module in `nuxt.config.ts`:

```diff [nuxt.config.ts]
export default defineNuxtConfig({
+  modules: ['@movk/nuxt']
})
```

### Import Styles

Import the module styles from your CSS entry, and register that file under `css` in `nuxt.config.ts`:

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@movk/nuxt";
```

```diff [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@movk/nuxt'],
+  css: ['~/assets/css/main.css']
})
```

> [!NOTE]
> 
> @movk/nuxt
> 
>  already imports 
> 
> @nuxt/ui
> 
> , so there is no need to 
> 
> @import "@nuxt/ui"
> 
>  separately. Keep a single Tailwind entry in the project: a second 
> 
> @import "tailwindcss"
> 
>  creates a second Tailwind context whose default theme variables override the ones the module injects, such as 
> 
> --font-sans
> 
> .

### Install the Icon Collection

Component icons come from Iconify's `lucide` collection. With the matching `@iconify-json` package installed, the module inlines the icons its components use at build time; without it those icons are fetched from the Iconify API at runtime, which fails on intranets and offline.

```bash [pnpm]
pnpm add -D @iconify-json/lucide
```

```bash [npm]
npm install -D @iconify-json/lucide
```

```bash [yarn]
yarn add -D @iconify-json/lucide
```

The module only covers icons used by its own components. Enable scanning so the icon names written in your project are bundled too:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  icon: {
    clientBundle: {
      scan: { globInclude: ['**/*.{vue,jsx,tsx,ts,md,mdc,mdx,yml,yaml}'] }
    }
  }
})
```

> [!NOTE]
> 
> The default 
> 
> globInclude
> 
>  of 
> 
> @nuxt/icon
> 
>  excludes 
> 
> .ts
> 
> , so icon names declared in composables or constant files are missed — hence the explicit 
> 
> ts
> 
>  entry above.

## Optional Configuration

```ts [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.

```ts
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:

```ts [✅ Correct Usage (Zod v4)]
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()
```

```ts [❌ Deprecated (Zod v3)]
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()
```

> [!TIP]
> See: https://zod.dev/api
> 
> See the official Zod documentation for more v4 changes


## Sitemap

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