Vue js 3. Prime Vue and Vee validate 4 combined

Discover the perfect combination for your Vue.js projects: PrimeVue’s comprehensive UI components combined with VeeValidate’s powerful form validation. I will explain in detail how to connect these libraries for modern Vue 3 version applications. Follow along as we explore the seamless synergy between PrimeVue and VeeValidate, unlocking new possibilities for your development workflow.

Firstly you should install these libraries by use of your package manager. I use npm for this example: The last lib — Yup will be used for validation logic.

npm install vee-validate
npm install primevue
npm install yup

I will use App.vue component to demonstrate the examples. We add prime vue into main.js and set it with one of theme — aura in this case.

[embed]

After that we create simple form by use of default vee validate Form and Field components (imported these components with Vee prefix to make it more clear). And yup schema used for validation logic:

[embed]

When you submit the form you will face validation errors. Then you can fill the fields and submit again. You will see log in the console with values of the filled form.

There could be some cases you want to implement the functionality for custom components. I will use Prime Vue library and demonstrate the same form how to validate by use of Vee Validate:

[embed]

Changes:

1. :validation-schema prop does not work for custom component way
2. ErrorMessage component does not work. Added span for errors
3. defineField used to define model values for field and binded to Prime Vue components
4. onSubmit updated to process handleSubmit first to initialize the validation process first

As you see we achieved the same functionality by using custom Prime vue components and validation logic worked as expected.

Bonus: We have some more functions and valueble data to work with form data:

• resetForm — to reset the form initial version
• setFieldValue — manually and programmatically set field value
• meta — valuable info about the current form state
• initialValue — not demostrated here but you can pass initialValue object with values to useForm

We are done. Great job!

Resources:

1. Vee Validate 4 documentation — https://vee-validate.logaretm.com/v4/guide/overview/
2. Prime Vue documentation — https://primevue.org/setup/
3. Yup documentation — https://www.npmjs.com/package/yup
4. Get 200$ free credit on DigitalOcean by registering this link — https://m.do.co/c/b62048d30761