Nuxt Auto CRUD Template

Type-to-UI Mapping Contract

Technical definition of how Drizzle/Zod types are transformed into Nuxt UI components within the nuxt-auto-crud ecosystem.

This contract defines the deterministic mapping of database schema types to UI components. It serves as a reference for AI agents to understand how specific data types will influence form generation and validation behavior.

Type-to-UI Mapping Contract

This guide defines how Drizzle/Zod types manifest as Nuxt UI components via useDynamicZodSchema.ts and Form.vue.

🧩 Component Mapping Table

Drizzle/Zod Type	Field Pattern	Component	Logic / Constraint
`boolean`	*	`UCheckbox`	Defaults to `false`.
`date`	*	`UInput`	`type="datetime-local"`. Coerced via `z.coerce.date()`.
`string`	`password`	`CommonPassword`	Create only. UI is read-only on Edit.
`string	number`	`Id`, `_id`	`CrudNameList`
`enum`	*	`USelect`	Items mapped from `field.selectOptions`.
`textarea`	*	`UTextarea`	Triggered by `field.type: 'textarea'`.
`string`	`status`	`USelect`	Permission-gated via `canUpdateStatus`.

🛡️ Operational Guardrails

System Fields: id, createdAt, updatedAt, deletedAt (and snake_case variants) are stripped by Form.vue and the Nitro backend.
Labeling: Labels are derived via capitalCase(fieldName.replace(/(_id|Id)$/, '')).
Passwords: Only accepted on POST. Stripped from PATCH payloads automatically.

API Communication Protocol

Specification for client-server interaction within the nuxt-auto-crud module.

MCP Servers (Agentic Integration)

Overview of the Model Context Protocol (MCP) servers used for discovery and execution within the nuxt-auto-crud ecosystem.