{"id":47707278,"url":"https://github.com/sfxcode/nuxt-ui-formkit","last_synced_at":"2026-05-16T11:07:47.087Z","repository":{"id":339757208,"uuid":"1163265829","full_name":"sfxcode/nuxt-ui-formkit","owner":"sfxcode","description":"Seamless integration between FormKit form handling and Nuxt UI components for Nuxt 4","archived":false,"fork":false,"pushed_at":"2026-03-29T12:12:26.000Z","size":1294,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-29T15:23:32.380Z","etag":null,"topics":["form","form-validation","formkit","nuxt","nuxt-module","nuxt-ui"],"latest_commit_sha":null,"homepage":"https://nuxt-ui-formkit.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sfxcode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-21T11:06:36.000Z","updated_at":"2026-03-29T12:12:29.000Z","dependencies_parsed_at":"2026-02-24T02:02:27.419Z","dependency_job_id":null,"html_url":"https://github.com/sfxcode/nuxt-ui-formkit","commit_stats":null,"previous_names":["sfxcode/formkit-nuxt-ui","sfxcode/nuxt-ui-formkit"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/sfxcode/nuxt-ui-formkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfxcode%2Fnuxt-ui-formkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfxcode%2Fnuxt-ui-formkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfxcode%2Fnuxt-ui-formkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfxcode%2Fnuxt-ui-formkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sfxcode","download_url":"https://codeload.github.com/sfxcode/nuxt-ui-formkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfxcode%2Fnuxt-ui-formkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31312744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-validation","formkit","nuxt","nuxt-module","nuxt-ui"],"created_at":"2026-04-02T18:01:15.992Z","updated_at":"2026-05-16T11:07:47.079Z","avatar_url":"https://github.com/sfxcode.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt UI FormKit\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\n\u003e Seamless integration between FormKit form handling and Nuxt UI components for Nuxt 4\n\nFormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerful form management and [Nuxt UI](https://ui.nuxt.com/)'s beautiful component library, providing a complete solution for building forms in Nuxt applications.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n- [🏀 \u0026nbsp;Live Playground](https://github.com/sfxcode/nuxt-ui-formkit/tree/main/playground)\n- [📖 \u0026nbsp;FormKit Documentation](https://formkit.com/)\n- [🎨 \u0026nbsp;Nuxt UI Documentation](https://ui.nuxt.com/)\n\n\u003cimg src=\"nuxt-ui-formkit.png\" alt=\"FormKit Nuxt UI Screenshot\" width=\"70%\" /\u003e\n\n## Features\n\n✨ **17 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components\n- `nuxtUICheckbox` - Single checkbox with label and description\n- `nuxtUICheckboxGroup` - Multiple checkbox selection\n- `nuxtUIColorPicker` - Color selection with multiple formats\n- `nuxtUIInput` - Text input with various types (text, email, password, etc.)\n- `nuxtUIInputDate` - Date and time picker with range support\n- `nuxtUIInputMenu` - Dropdown menu with searchable options\n- `nuxtUIInputNumber` - Number input with increment/decrement buttons\n- `nuxtUIInputTags` - Tag input with custom delimiters\n- `nuxtUIInputTime` - Time picker with 12/24-hour format\n- `nuxtUIListbox` - Listbox for single/multiple selection with filtering (for use with transfer mode lucide icons must be installed additionally)\n- `nuxtUIPinInput` - PIN/OTP entry component\n- `nuxtUIRadioGroup` - Radio button group for single selection\n- `nuxtUISelect` - Select dropdown with search\n- `nuxtUISelectMenu` - Advanced select with grouping\n- `nuxtUISlider` - Range slider for numeric values\n- `nuxtUISwitch` - Toggle switch for boolean states\n- `nuxtUITextarea` - Multi-line text input with autoresize\n\n🔁 **Repeater Component** - Dynamic repeatable form sections\n- `nuxtUIRepeater` - Create dynamic lists with add, remove, clone, and reorder functionality\n\n📊 **6 Output Components** - Display-only components for read-only data\n- `nuxtUIOutputBoolean` - Boolean display with custom icons\n- `nuxtUIOutputDate` - Formatted date/time display\n- `nuxtUIOutputLink` - URL display with navigation\n- `nuxtUIOutputList` - List display with separators and badge styles\n- `nuxtUIOutputNumber` - Formatted number display (currency, percentage)\n- `nuxtUIOutputText` - Styled text display with icons\n\n🎯 **Form Management** - Powerful form utilities\n- `FUDataEdit` - Edit forms with schema-based configuration\n- `FUDataView` - Read-only data display with schema support\n- `FUDataDebug` - Development tool for form debugging\n\n🔧 **Composables \u0026 Utilities** - Reusable form logic\n- `useFormKitSchema` - Schema-based form generation with element builders\n- `useFormKitInput` - Input component utilities and prop handling\n- `useFormKitOutput` - Output component utilities and prop handling\n- `colorConverter` - Color format conversion utilities\n- `durationConverter` - Duration format conversion utilities\n\n🎨 **Full Nuxt UI Integration** - All components respect Nuxt UI theming\n- Color modes (light/dark)\n- Design tokens\n- Accessibility features\n- Responsive design\n\n✅ **TypeScript Support** - Full type safety with IntelliSense\n⚡ **SSR Compatible** - Works seamlessly with Nuxt's server-side rendering\n🔄 **Auto-imports** - Components and composables auto-imported\n📝 **Validation** - Built-in FormKit validation support\n\n## Quick Setup\n\nInstall the module to your Nuxt application:\n\n```bash\n# Using pnpm (recommended)\npnpm add @sfxcode/nuxt-ui-formkit\n\n# Using npm\nnpm install @sfxcode/nuxt-ui-formkit\n\n# Using yarn\nyarn add @sfxcode/nuxt-ui-formkit\n```\n\nAdd the module to your `nuxt.config.ts`:\n\n```typescript\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxt/ui',\n    '@sfxcode/nuxt-ui-formkit'\n  ]\n})\n```\n\nThat's it! You can now use FormKit Nuxt UI components in your Nuxt app ✨\n\n## Usage\n\n### Basic Form Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cFormKit\n    type=\"form\"\n    @submit=\"handleSubmit\"\n  \u003e\n    \u003cFormKit\n      type=\"nuxtUIInput\"\n      name=\"email\"\n      label=\"Email Address\"\n      placeholder=\"your.email@example.com\"\n      validation=\"required|email\"\n    /\u003e\n\n    \u003cFormKit\n      type=\"nuxtUIInput\"\n      name=\"password\"\n      input-type=\"password\"\n      label=\"Password\"\n      validation=\"required|length:8\"\n    /\u003e\n\n    \u003cFormKit\n      type=\"nuxtUICheckbox\"\n      name=\"terms\"\n      label=\"I agree to the terms and conditions\"\n      validation=\"accepted\"\n    /\u003e\n\n    \u003cUButton type=\"submit\"\u003e\n      Sign Up\n    \u003c/UButton\u003e\n  \u003c/FormKit\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst handleSubmit = (data: any) =\u003e {\n  console.log('Form submitted:', data)\n}\n\u003c/script\u003e\n```\n\n### Schema-Based Form\n\n```vue\n\u003ctemplate\u003e\n  \u003cFUDataEdit\n    :data=\"formData\"\n    :schema=\"userSchema\"\n    @submit=\"handleSubmit\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst formData = ref({\n  name: '',\n  email: '',\n  age: 0,\n  subscribe: false\n})\n\nconst userSchema = [\n  {\n    $formkit: 'nuxtUIInput',\n    name: 'name',\n    label: 'Full Name',\n    validation: 'required'\n  },\n  {\n    $formkit: 'nuxtUIInput',\n    name: 'email',\n    inputType: 'email',\n    label: 'Email',\n    validation: 'required|email'\n  },\n  {\n    $formkit: 'nuxtUIInputNumber',\n    name: 'age',\n    label: 'Age',\n    min: 0,\n    max: 120\n  },\n  {\n    $formkit: 'nuxtUISwitch',\n    name: 'subscribe',\n    label: 'Subscribe to newsletter'\n  }\n]\n\nconst handleSubmit = (data: any) =\u003e {\n  console.log('Form submitted:', data)\n}\n\u003c/script\u003e\n```\n\n### Advanced Number Input with Formatting\n\n```vue\n\u003cFormKit\n  type=\"nuxtUIInputNumber\"\n  name=\"price\"\n  label=\"Product Price\"\n  :min=\"0\"\n  :step=\"0.01\"\n  :format-options=\"{\n    style: 'currency',\n    currency: 'USD'\n  }\"\n  validation=\"required|min:0\"\n/\u003e\n```\n\n### Output Components for Display\n\n```vue\n\u003ctemplate\u003e\n  \u003cFUDataView\n    :data=\"userData\"\n    :schema=\"displaySchema\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nconst userData = ref({\n  name: 'John Doe',\n  email: 'john@example.com',\n  price: 1234.56,\n  tags: ['Vue', 'Nuxt', 'TypeScript'],\n  isActive: true\n})\n\nconst displaySchema = [\n  {\n    $formkit: 'nuxtUIOutputText',\n    name: 'name',\n    label: 'Name',\n    leadingIcon: 'i-heroicons-user'\n  },\n  {\n    $formkit: 'nuxtUIOutputLink',\n    name: 'email',\n    label: 'Email',\n    leadingIcon: 'i-heroicons-envelope'\n  },\n  {\n    $formkit: 'nuxtUIOutputNumber',\n    name: 'price',\n    label: 'Price',\n    formatOptions: {\n      style: 'currency',\n      currency: 'USD'\n    }\n  },\n  {\n    $formkit: 'nuxtUIOutputList',\n    name: 'tags',\n    label: 'Technologies',\n    listType: 'badge',\n    color: 'primary'\n  },\n  {\n    $formkit: 'nuxtUIOutputBoolean',\n    name: 'isActive',\n    label: 'Status',\n    trueValue: 'Active',\n    falseValue: 'Inactive'\n  }\n]\n\u003c/script\u003e\n```\n\n## Component Props\n\nAll components support their respective Nuxt UI component props plus FormKit-specific props like `name`, `label`, `help`, `validation`, etc.\n\nRefer to the [Nuxt UI documentation](https://ui.nuxt.com/) for component-specific props and the [FormKit documentation](https://formkit.com/) for validation and form handling.\n\n## Examples\n\nThe playground includes comprehensive examples for all components:\n\n### Input Components\n- [Checkbox](./playground/app/pages/components/input/checkbox.vue)\n- [CheckboxGroup](./playground/app/pages/components/input/checkbox-group.vue)\n- [ColorPicker](./playground/app/pages/components/input/color-picker.vue)\n- [Input](./playground/app/pages/components/input/input.vue)\n- [InputDate](./playground/app/pages/components/input/input-date.vue)\n- [InputMenu](./playground/app/pages/components/input/input-menu.vue)\n- [InputNumber](./playground/app/pages/components/input/input-number.vue)\n- [InputTags](./playground/app/pages/components/input/input-tags.vue)\n- [InputTime](./playground/app/pages/components/input/input-time.vue)\n- [Listbox](./playground/app/pages/components/input/listbox.vue)\n- [PinInput](./playground/app/pages/components/input/pin-input.vue)\n- [RadioGroup](./playground/app/pages/components/input/radio-group.vue)\n- [Select](./playground/app/pages/components/input/select.vue)\n- [SelectMenu](./playground/app/pages/components/input/select-menu.vue)\n- [Slider](./playground/app/pages/components/input/slider.vue)\n- [Switch](./playground/app/pages/components/input/switch.vue)\n- [Textarea](./playground/app/pages/components/input/textarea.vue)\n\n### Output Components\n- [OutputBoolean](./playground/app/pages/components/output/boolean.vue)\n- [OutputDate](./playground/app/pages/components/output/date.vue)\n- [OutputLink](./playground/app/pages/components/output/link.vue)\n- [OutputList](./playground/app/pages/components/output/list.vue)\n- [OutputNumber](./playground/app/pages/components/output/number.vue)\n- [OutputText](./playground/app/pages/components/output/text.vue)\n\n## Development\n\n\u003cdetails\u003e\n  \u003csummary\u003eLocal development setup\u003c/summary\u003e\n  \n  ```bash\n  # Clone the repository\n  git clone https://github.com/sfxcode/nuxt-ui-formkit.git\n  cd nuxt-ui-formkit\n  \n  # Install dependencies (using pnpm)\n  pnpm install\n  \n  # Generate type stubs\n  pnpm dev:prepare\n  \n  # Start development server with playground\n  pnpm dev\n  \n  # Build the playground\n  pnpm dev:build\n  \n  # Run ESLint\n  pnpm lint\n  \n  # Run tests\n  pnpm test\n  pnpm test:watch\n  \n  # Build the module\n  pnpm build\n  \n  # Release new version\n  pnpm release\n  ```\n\n\u003c/details\u003e\n\n## Requirements\n\n- Nuxt 4.x\n- Vue 3.x\n- @nuxt/ui 4.3.0+\n- @formkit/vue 1.x\n- @formkit/nuxt 1.x\n\n## External Module Usage\n\nExternal Nuxt modules and applications can import FormKit definitions programmatically.\n\n### Import All Definitions\n\n```typescript\nimport { nuxtUIInputs, nuxtUIOutputs } from '@sfxcode/nuxt-ui-formkit/formkit'\n\n// Use in FormKit config\nexport default defineFormKitConfig({\n  inputs: {\n    ...nuxtUIInputs,\n    ...nuxtUIOutputs,\n  },\n})\n```\n\n### Import Individual Definitions\n\n```typescript\nimport { \n  nuxtUICheckboxDefinition,\n  nuxtUIInputDefinition,\n  nuxtUIListboxDefinition,\n  nuxtUISelectDefinition \n} from '@sfxcode/nuxt-ui-formkit/definitions'\n\nexport default defineFormKitConfig({\n  inputs: {\n    nuxtUICheckbox: nuxtUICheckboxDefinition,\n    nuxtUIInput: nuxtUIInputDefinition,\n    nuxtUIListbox: nuxtUIListboxDefinition,\n    nuxtUISelect: nuxtUISelectDefinition,\n  },\n})\n```\n\n### Available Import Paths\n\n- `@sfxcode/nuxt-ui-formkit/formkit` - All definitions + type augmentation\n- `@sfxcode/nuxt-ui-formkit/definitions` - Definition objects only\n\nFor detailed usage examples, see [EXTERNAL_USAGE.md](./EXTERNAL_USAGE.md).\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes using [Conventional Commits](https://www.conventionalcommits.org/) (`git commit -m 'feat: add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\n[MIT License](./LICENSE) © 2024-present [sfxcode](https://github.com/sfxcode)\n\n## Credits\n\n- [FormKit](https://formkit.com/) - Form framework for Vue\n- [Nuxt UI](https://ui.nuxt.com/) - UI library for Nuxt\n- [Nuxt](https://nuxt.com/) - The Intuitive Vue Framework\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@sfxcode/nuxt-ui-formkit/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://npmjs.com/package/@sfxcode/nuxt-ui-formkit\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/@sfxcode/nuxt-ui-formkit.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://npm.chart.dev/@sfxcode/nuxt-ui-formkit\n\n[license-src]: https://img.shields.io/npm/l/@sfxcode/nuxt-ui-formkit.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: https://npmjs.com/package/@sfxcode/nuxt-ui-formkit\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfxcode%2Fnuxt-ui-formkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsfxcode%2Fnuxt-ui-formkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfxcode%2Fnuxt-ui-formkit/lists"}