[Module Listing Request]: `@movk/nuxt`

Description

Modular engineering suite for Nuxt 4 with schema-driven forms, data tables, an API integration system, and standalone UI components — usable in both Nuxt and plain Vue + Vite projects.

@movk/nuxt provides a declarative way to build forms and tables from Zod v4 schemas, plus a rich set of API utilities and standalone UI components. It follows a layered architecture: use individual components, composables, or the full automation system as needed. Since v1.3.0 the UI components, theme, and non-server composables also work in a plain Vue + Vite project via the @movk/nuxt/vite + @movk/nuxt/vue-plugin compatibility layer (the API domain stays Nuxt-only).

Key Features

• Schema-Driven Forms: AutoForm powered by Zod v4 — generates a complete form UI from a schema with 15+ control types and full type inference.
• Schema-Driven Tables: DataTable + SearchForm with column resolution, special columns, tree selection, sorting/pinning/resizing, and a schema-driven search bar.
• API Integration System: useApiFetch / useLazyApiFetch / useClientApiFetch with automatic auth header injection (via nuxt-auth-utils), business status-code checking, toast notifications, and useUploadWithProgress / useDownloadWithProgress for progress monitoring.
• Standalone UI Components: DatePicker, ColorChooser, StarRating, SlideVerify, PillGroup, Popconfirm, MessageBox, and 6 enhanced inputs — usable independently.
• Vue + Vite Dual Mode: The same UI components, theming, and non-server composables run in a plain Vue + Vite app, aligned with @nuxt/ui.
• Type Safety: Full TypeScript inference from schema to form/table data.
• Extensible: Custom controls, layout system, conditional rendering, and theming.

Components & Composables

Main components (10): MAutoForm, MDataTable, MSearchForm, MDatePicker, MColorChooser, MMessageBox, MPillGroup, MPopconfirm, MStarRating, MSlideVerify

Enhanced inputs (6): MAsPhoneNumberInput, MWithCharacterLimit, MWithClear, MWithCopy, MWithFloatingLabel, MWithPasswordToggle

Composables (9): useApiFetch, useLazyApiFetch, useClientApiFetch, useAutoForm, useTheme, useDateFormatter, useMessageBox, useUploadWithProgress, useDownloadWithProgress

Supported AutoForm Control Types

• Basic inputs: UInput, UInputNumber, UCheckbox, USwitch
• Selectors: USelect, USelectMenu, URadioGroup, UCheckboxGroup
• Advanced inputs: UTextarea, USlider, UPinInput, UInputTags
• File upload: UFileUpload
• Custom components: MDatePicker, MColorChooser, MStarRating
• Enhanced inputs: MWithCopy, MWithClear, MWithPasswordToggle, MWithCharacterLimit

Example Usage

AutoForm

<script setup lang="ts">
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod/v4'

const { afz } = useAutoForm()

const schema = afz.object({
  username: afz.string().min(3).meta({ label: 'Username' }),
  email: afz.email().meta({ label: 'Email' }),
  age: afz.number().min(18).meta({ label: 'Age' }),
  role: afz.enum(['admin', 'user']).meta({ label: 'Role' }),
  isActive: afz.boolean().meta({ label: 'Active Status' })
})

type Schema = z.output<typeof schema>

const form = ref<Partial<Schema>>({})

async function onSubmit(event: FormSubmitEvent<Schema>) {
  console.log('Form data:', event.data)
}
</script>

<template>
  <MAutoForm :schema="schema" :state="form" @submit="onSubmit" />
</template>

DataTable

<template>
  <MDataTable :columns="columns" :data="data" sortable pinable resizable />
</template>

API Integration

// Basic request — unwraps the business data
const { data, pending, error } = await useApiFetch<User[]>('/users')

// POST with a success toast
const { data: created } = await useApiFetch<User>('/users', {
  method: 'POST',
  body: { name: 'test' },
  toast: { successMessage: 'User created successfully' }
})

// File upload with progress
const { progress, status, upload } = useUploadWithProgress<UploadResult>()
await upload('/api/upload', file, {
  onSuccess: result => console.log('Upload completed:', result)
})

Authentication is configured via the module (built on nuxt-auth-utils); useApiFetch then injects the auth header automatically:

export default defineNuxtConfig({
  modules: ['@movk/nuxt'],
  movk: {
    api: {
      auth: {
        enabled: true,
        sessionTokenPath: 'token', // path within the user session
        tokenType: 'Bearer'
      }
    }
  }
})

Standalone Components

<template>
  <MDatePicker v-model="selectedDate" label-format="iso" />

  <MWithCopy v-model="apiKey" />
  <MWithPasswordToggle v-model="password" />
  <MWithCharacterLimit v-model="bio" :max-length="200" />

  <MStarRating v-model="rating" :max="5" />
  <MColorChooser v-model="color" />
</template>

Configuration

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

Requirements

• Nuxt >=4.4.2
• peerDependencies: @nuxt/ui >=4.6.0, zod >=4.3.6
• Module dependencies (auto-checked): @vueuse/nuxt >=14.2.1, @nuxt/image >=2.0.0, @nuxt/ui >=4.6.0, nuxt-auth-utils >=0.5.29, nuxt-site-config >=4.0.8

Documentation

https://nuxt.mhaibaraai.cn

Repository

https://github.com/mhaibaraai/movk-nuxt

npm

https://www.npmjs.com/package/@movk/nuxt

Nuxt Compatibility

Nuxt 4

Start by reviewing the module catalog's existing listing format and contribution instructions in the nuxt/modules repository; this issue does not name a target file. Use the supplied package, repository, npm, and documentation links to verify the metadata, and consider the work done when @movk/nuxt is listed consistently with other modules.