Introduction

View source
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.
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, StarRating and ColorChooser, 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:

Architecture Levels
  • Core Systems - AutoForm (schema-driven forms), DataTable (type-safe tables)
  • API System - useApiFetch, useLazyApiFetch, useClientApiFetch, useUploadWithProgress, useDownloadWithProgress
  • Standalone Components - DatePicker, SearchForm, StarRating, 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, Zod v4, VueUse

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.

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.

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
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
  • StarRating / ColorChooser - Interactive components
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
View all Composables

Installation

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

Copyright © 2025 - 2026 YiXuan - MIT License