Nuxt Forms

Easy and minimal client-side form handling for Nuxt 3

Features

• Minimal and small with no direct dependencies and fully tree shakeable
• Easy integrate popular solutions for data validation (Valibot, Zod and build in rules)
• Two-way data binding with support for nested values
• Integrated error message handling and interpolation
• Comes with composables and headless components to easily create forms
• Use it to build your own custom form component library

Quick Setup

1. Add nuxt-forms dependency to your project

# Using pnpm
pnpm add --save-dev nuxt-forms

# Using yarn
yarn add --dev nuxt-forms

# Using npm
npm install --save-dev nuxt-forms

2. Add nuxt-forms to the modules section of nuxt.config.{ts,js}

{
  modules: [
    'nuxt-forms'
  ]
}

That's it! You can now use Nuxt Forms in your Nuxt app ✨

Credits

• Inspired by VeeValidate (@logaretm)
• Rules depend on VeeValidate rules (@logaretm)
• Validator adapters inspired by modular-forms (@fabian-hiller)

License

MIT License

Copyright (c) Disedia