Nuxt UI FormKitBuild Beautiful Forms with FormKit & Nuxt UI

Quick Example ​

<script setup lang="ts">
const formData = ref({ 
  email: '', 
  subscribe: false 
})

const schema = [
  {
    $formkit: 'nuxtUIInput',
    name: 'email',
    label: 'Email Address',
    inputType: 'email',
    validation: 'required|email'
  },
  {
    $formkit: 'nuxtUISwitch',
    name: 'subscribe',
    label: 'Subscribe to newsletter'
  }
]
</script>

<template>
  <FUDataEdit
    :data="formData"
    :schema="schema"
    @data-saved="handleSubmit"
  />
</template>

Why Nuxt UI FormKit? ​

Nuxt UI FormKit bridges the gap between FormKit's powerful form handling capabilities and Nuxt UI's beautiful component system. Whether you're building simple contact forms or complex multi-step wizards, this module provides everything you need to create production-ready forms quickly.

Key Benefits ​

• Schema-First Approach: Define forms as JSON objects for better maintainability and reusability
• Complete Component Library: 17 input components + 6 output components + management utilities
• Production Ready: Battle-tested with TypeScript, SSR support, and accessibility built-in
• Developer Experience: Auto-imports, IntelliSense, and comprehensive documentation

Ready to Start? ​

Get started by installing the module or explore the component library.