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

[mhaibaraai]

Description

Modular engineering suite for Nuxt 4 with schema-driven forms, API integration, UI components and composables.

@movk/nuxt is a comprehensive module that provides a declarative approach to building forms through Zod schemas, along with a rich set of API utilities and standalone UI components. It follows a layered architecture allowing developers to use individual components or the complete automation system based on their needs.

Key Features

• Schema-Driven Forms: AutoForm system powered by Zod v4, automatically generates complete form UIs from schemas with 15+ control types
• API Integration System: Built-in composables including useApiFetch, useApiAuth, useUploadWithProgress, and useDownloadWithProgress with automatic authentication, business status code checking, toast notifications, and progress monitoring
• Standalone UI Components: 10+ high-quality components (DatePicker, StarRating, WithCopy, WithClear, WithPasswordToggle, WithCharacterLimit, ColorChooser, etc.) that can be used independently
• Type Safety: Full TypeScript type inference from schema to form data
• Modular Design: Layered architecture - use UI components, utilities, or the complete automation system as needed
• Extensible: Support for custom controls, layout system, conditional rendering, and other advanced features

Supported Control Types

• Basic inputs: UInput, UInputNumber, UCheckbox, USwitch
• Selectors: USelect, USelectMenu, URadioGroup, UCheckboxGroup
• Advanced inputs: UTextarea, USlider, UPinInput, UInputTags
• Custom components: DatePicker, ColorChooser, StarRating
• File upload: UFileUpload
• Enhanced inputs: WithCopy, WithClear, WithPasswordToggle, WithCharacterLimit

Example Usage

AutoForm Example

<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>

API Integration Example

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

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

// Authentication management
const { login, clear, loggedIn, user } = useApiAuth()

await login({
  loginPath: '/auth/login',
  credentials: { username: 'admin', password: '123456' },
  userInfoPath: '/auth/me'
})

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

Standalone Components Example

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

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

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

Configuration

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

Documentation

https://nuxt.mhaibaraai.cn

Repository

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

npm

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

Nuxt Compatibility

Nuxt 4