nuxt-ui-extended

Extended components for Nuxt UI: a schema-driven <AutoForm> (powered by Zod), three programmatic dialog composables, and a Markdown renderer with Shiki syntax highlighting — all typed, all built on top of Nuxt UI's own primitives.

📖 Full documentation — install, <AutoForm> reference, dialog utils, and <Markdown> reference, with live interactive examples. Run it locally:

cd docs && pnpm install && pnpm dev

Why

Building a form usually means writing the fields twice: once in your validation schema, once in your markup. Confirmation and input dialogs usually mean a v-model, an event handler, and a component you only use once. This module collapses both down to a single call:

const schema = z.object({
  name: z.string().min(2),
  email: z.email()
})

const result = await requestUserInputs({ title: 'Invite teammate', schema })
// result: { name: string; email: string } | false | undefined

The schema is the single source of truth — it drives validation and the rendered UI, so they can never drift apart.

Features

• 🧩 <UAutoForm> — pass a Zod object schema, get a fully validated, accessible form. Widgets (input, select, slider, date, tags, color picker, repeatable arrays, discriminated unions, recursive schemas, …) are inferred from the schema and overridable per-field with .meta({ ... }).
• 💬 Programmatic dialogs — requestUserConfirmation, requestUserInputs, requestUserSelection open a modal/drawer/slideover and resolve a promise with the result. No dialog markup, no v-model, no template wiring.
• 📝 <UMarkdown> — renders Markdown with Shiki-highlighted code blocks, task lists, emoji, and HTML sanitization — safe by default for untrusted content.
• 🔒 Type-safe end to end — the module augments Zod's GlobalMeta so .meta({ ... }) is typed against every supported field option.

Quick start

pnpm add nuxt-ui-extended zod @nuxt/ui

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

<script setup lang="ts">
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(2).meta({ placeholder: 'Jane Doe' }),
  email: z.email(),
  role: z.enum(['viewer', 'editor', 'admin']).meta({ as: 'radio' })
})

function onSubmit(data: z.output<typeof schema>) {
  console.log(data)
}
</script>

<template>
  <UAutoForm
    :schema="schema"
    @submit="onSubmit"
  />
</template>

// anywhere in a <script setup> — no component markup needed
const confirmed = await requestUserConfirmation({
  title: 'Delete item',
  description: 'This action cannot be undone. Continue?'
})

const target = await requestUserSelection(
  ['Development', 'Staging', 'Production'],
  { title: 'Deploy target' }
)

See the docs for the full <AutoForm> field reference (widgets, showWhen, custom slots, unions), every dialog composable's options, and the underlying dialog components for advanced useOverlay() control.

Requirements

| Package | Version | | ------------------------- | ------- | | nuxt | >=4 | | @nuxt/ui | >=4 | | zod | >=4 | | @internationalized/date | ^3.12 |

Playground

pnpm install
pnpm dev          # runs the playground app at playground/
pnpm dev:build    # builds it

Contributing

pnpm install
pnpm dev:prepare
pnpm test         # vitest
pnpm lint         # eslint
pnpm fmt          # oxfmt

License

MIT