Validating UI Libraries Examples

Most popular Vue.js UI libraries come with their own built-in validation logic in their form components. If you find yourself not satisfied with said library’s validation logic, you can use vee-validate to validate those components.

vee-validate is UI-agnostic, it doesn’t offer any special treatment for the elements/components under validation as long as they emit the right events.

Integrating vee-validate can be different for each UI library, it mostly depends on the library’s ability to outsource the validation logic to 3rd party logic and how it tracks the form field values.

In the next few examples you will find examples on how to do that in various ways with the most popular Vue.js libraries in no particular order.

Vuetify

Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components.

Check their official example here.

PrimeVue

PrimeVue is a rich set of open source UI Components for Vue.

Check their official example here.

Quasar

Quasar framework aims to:

Effortlessly build high-performance & high-quality Vue 3 user interfaces in record time

Element Plus

Element Plus, a Vue 3.0 based component library for developers, designers and product managers

Headless UI

Headless UI, a completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Ionic Framework

Ionic Framework, An open source mobile toolkit for building high quality, cross-platform native and web app experiences.

This example is originally forked from another example created by Aaron Saunders.

Ant Design

Ant Design provides plenty of UI components to enrich your web applications, and we will improve components experience consistently.

Request a UI library

Can’t find your favorite UI library here? You can request adding an example for it by creating an issue here and we will consider adding it here.