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.

Installation

In order to get this to work in your app, you will need to install the following package:

• Vee-Validate Nuxt Module

npm i @vee-validate/nuxt

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. For this documentation, I will be using zod to perform validation.

npm i zod @vee-validate/zod

After that, we will need to add the @vee-validate/nuxt module to our nuxt.config.js file.

modules: [
  "@vee-validate/nuxt",
],