Forms Introduction
Check out the form elements that are created with the help of Vee-Validate to easily add validation to your Nuxt app.
So you may be wondering why I have 2 types of forms in this documentation... In all honesty, I was just following the guys that created shadcn-vue lol.
The components created here is how I usually go about creating form elements to be used in my projects. I use the composition API provided by vee-validate to compose my reusable form elements and then use the useForm composable to do the validation with either zod or yup schemas.
Getting Started
Installation
In order to get this to work in your app, you will need to install the Vee-Validate Nuxt Module
npm i @vee-validate/nuxt
Add Validation Library
You will also need a library that will be used to perform validation.
Since vee-validate supports zod, yup, valibot and joi, you can choose any of these libraries to perform validation.
Zod
npm i zod @vee-validate/zod
Yup
npm i yup @vee-validate/yup
Valibot
npm i valibot @vee-validate/valibot
Joi
npm i joi @vee-validate/joi
Update Nuxt Config
After that, we will need to add the @vee-validate/nuxt module to our nuxt.config.js file.
export default defineNuxtConfig({
//...
modules: ["@vee-validate/nuxt"],
//...
});