v-nuxt-ui

V Nuxt UI

A reusable Nuxt module providing enterprise-grade components, composables, and utilities built on top of @nuxt/ui.

Features

• ProTable — Sophisticated data table with CRUD, pagination, column management, where/order query filters (persisted to localStorage), row selection, context menu actions, Excel export, tree data, row expansion, and column pinning with shadow effects
• ProForm — Declarative form builder with 18+ field types and Zod validation
• ProDeleteModal — Generic delete confirmation modal with batch support
• ProPermissionWrapper — Permission-based UI wrapper with hide/disable modes
• ProDatePicker — Enhanced date picker with shortcut presets
• ProDnd — Drag-and-drop list via vue-draggable-plus
• 30+ composables — useApi, useModel, useBoolean, useForm, useDate, useEChart, useApp, useTheme, and 9 table composables
• Utility functions — String, array, tree, diff, form, excel, type, emoji, request, download helpers
• i18n — English and Chinese locale files
• Plugins — NuxtUI toast enhancements, dayjs integration

Installation

pnpm add @anthropic-test/v-nuxt-ui

Peer dependencies

pnpm add @nuxt/ui @nuxtjs/i18n @vueuse/nuxt nuxt

Optional dependencies

# For charts
pnpm add echarts vue-echarts

# For Excel export
pnpm add exceljs

# For drag-and-drop
pnpm add vue-draggable-plus

# For cron expression display
pnpm add cronstrue

Usage

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@anthropic-test/v-nuxt-ui']
})

Module Options

export default defineNuxtConfig({
  modules: ['@anthropic-test/v-nuxt-ui'],
  vNuxtUI: {
    prefix: 'Pro' // Component prefix (default: 'V')
  }
})

Components

ProTable

<ProTable
  name="users"
  cn-name="Users"
  :biz-columns="bizColumns"
  :use-api-group="useUserApi"
  :on-edit-row-from-modal="openEditModal"
  :export-excel="{ filename: 'users' }"
/>

ProForm

<ProForm
  :fields="[
    { key: 'name', label: 'Name', type: 'input', required: true },
    { key: 'email', label: 'Email', type: 'input' },
    { key: 'role', label: 'Role', type: 'select', items: roleOptions }
  ]"
  :model="formData"
  @submit="handleSubmit"
/>

ProPermissionWrapper

The permission wrapper uses provide/inject. Your app must provide the permission checker:

// In your app's plugin or root component
const { hasPermissions } = usePermission()
provide('vui:hasPermissions', hasPermissions)

<ProPermissionWrapper permission="users:delete" mode="disable">
  <UButton color="error">Delete</UButton>
</ProPermissionWrapper>

API Composables

Create standard CRUD API composables using the factory pattern:

// composables/api/useUserApi.ts
export const useUserApi = () => useApi<User>('/api/users')

This provides: create, batchCreate, update, batchUpdate, getById, deleteById, batchDelete, count, list, countAndList, prune, copy.

Development

# Install dependencies
make install

# Start playground dev server
make dev

# Build the module
make build

# Run linter
make lint

# Type check
make typecheck

Publishing

# Dry-run
make publish-dry

# Publish
make publish

Notes

1. 在form里面某些字段类型比如tree-select-transfer第一次选择后报错Invalid input: expected array, received undefined，可以 1. 设置默认值 2. 设置zod类型为optional

License

MIT

Embedded table toolbar and filters

ProTable and ProTablePage accept toolbarPortal (a DOM selector) to mount their native actions beside a surrounding tab list. Set toolbarVisible to false while a cached table is inactive. The target must exist before the table mounts. This avoids duplicating titles or positioning actions with CSS.

Filters open in a top slideover above the table without a backdrop, while retaining the focus trap. The close button, Escape key, and successful query submission close the slideover. Filter values and column settings remain persisted; panel visibility is local to each table instance and starts closed. Sorting drawers also omit the backdrop.