---
title: "Introduction"
description: "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."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/getting-started"
---
# 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.

## Introduction

Movk Nuxt is a **UI engineering suite built on Nuxt UI**, with a **layered architecture** that resolves repetitive work through highly abstracted automation systems (such as AutoForm and API System), while providing high-quality standalone components and composables for customized needs. It follows the same design principles as Nuxt UI: beautiful, accessible, and developer-friendly.

It offers **two modes of use**:

- **Nuxt 4** — Get full capabilities including API integration (auth, progress tracking).
- **Plain Vue + Vite** — Via `@movk/nuxt/vite` + `@movk/nuxt/vue-plugin`, use its UI layer: standalone components, AutoForm, DataTable, theming and non-server-side composables. **The API integration domain depends on the Nuxt server runtime and is only available in Nuxt mode.**

> [!NOTE]
> 
> Follows 
> 
> progressive adoption
> 
>  principles — you can use just the date utilities or UI components, use fully automated 
> 
> AutoForm
> 
> , integrate the 
> 
> API System
> 
>  in Nuxt, or bring its UI layer into a plain Vue + Vite project (see 
> 
> Vue / Vite
> 
> ).

## Core Features

**Schema-Driven Forms · Nuxt / Vue+Vite**

AutoForm

 automatically generates complete form interfaces from a Zod Schema — one Schema simultaneously defines data structure, validation rules and UI configuration.

**Type-Safe Table · Nuxt / Vue+Vite**

DataTable

 provides data, selection, index, expand and action column types, with sorting, column pinning, tree data, pagination and load-more support.

**Standalone Components & Utilities · Nuxt / Vue+Vite**

Components like 

DatePicker

, 

SearchForm

, 

ColorChooser

 and 

Tree

, along with composables like 

useDateFormatter

, 

useTheme

 and 

useMessageBox

, can all be used independently.

**API Integration System · Nuxt Only**

The 

useApiFetch

 family wraps multi-endpoint, auto-auth, business status code checking and Toast notifications, plus file upload/download with progress (requires Nuxt server runtime).

## Architecture Layers

Movk Nuxt uses a clear layered architecture:

> [!NOTE]
> 
> **Architecture Levels**
> 
> - **Core Systems** - AutoForm (schema-driven forms), DataTable (type-safe tables)
> - **API System** - useApiFetch, useLazyApiFetch, useClientApiFetch, useUploadWithProgress, useDownloadWithProgress
> - **Standalone Components** - DatePicker, SearchForm, ColorChooser, SlideVerify, PillGroup, input enhancement components, etc.
> - **Composables** - useDateFormatter, useAutoForm, useTheme, useMessageBox and other general-purpose composables
> - **Vite/Vue Compatibility Layer** - `@movk/nuxt/vite` + `@movk/nuxt/vue-plugin`, making the UI layer (Core Systems, Standalone Components, non-server composables) available in plain Vue + Vite (excludes API System)
> - **Foundation** - Based on [Nuxt UI](https://ui.nuxt.com), [Zod v4](https://zod.dev), [VueUse](https://vueuse.org)

## Core Modules

### AutoForm - Schema-Driven Form System

A "define and render" form solution based on Zod Schema, supporting multiple control types, layout systems, conditional linking and other advanced features.

> [!TIP]
> See: /docs/auto-form
> 
> Deep dive into AutoForm's core concepts and usage

### DataTable - Type-Safe Data Table

A declarative column configuration table based on `@tanstack/vue-table`, supporting data, selection, index, expand and action column types, as well as sorting, column pinning, drag-to-resize, tree data, pagination and load-more.

> [!TIP]
> See: /docs/data-table
> 
> Learn about DataTable's column configuration and advanced features

### API System - Unified Requests & Auth

Provides a complete API request solution:

- `useApiFetch` - Wraps useFetch with auto-auth, business status code checking and Toast notifications
- `useUploadWithProgress` / `useDownloadWithProgress` - File upload/download with progress monitoring

> [!TIP]
> See: /docs/api
> 
> Learn how to use the API System

### Standalone Components - Ready to Use

High-quality UI components that can be used directly without AutoForm:

- `DatePicker` - Internationalization-standard date picker (single / range / multiple)
- `WithCopy` / `WithClear` / `WithPasswordToggle` - Input enhancement components
- `SlideVerify` / `ColorChooser` - Interactive components

> [!TIP]
> See: /docs/components/as-phone-number-input
> 
> Browse all available components

### General Utilities

- `useDateFormatter` - Date formatting, parsing and range processing utilities
- `useAutoForm` - Core logic wrapper for AutoForm
- `useTheme` - Theme state reading/writing with CSS/config export
- `useMessageBox` - Imperative alert / confirm dialogs

> [!TIP]
> See: /docs/composables/use-auto-form
> 
> View all Composables


## Sitemap

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