# Vuelidate Plugin


Vuelidate is still in testing in pre-release state.

In order to seamlessly validate FormVueLatte by using Vuelidate, we provide a VuelidatePlugin that will allow you to easily accomplish this.

# Installation

Add the plugin and Vuelidate to your project's package.

npm i @vuelidate/core @vuelidate/validators @formvuelate/plugin-vuelidate


yarn add @vuelidate/core @vuelidate/validators @formvuelate/plugin-vuelidate

# Setting up the validations in the schema

Your schema will need some changes in order to work with the VuelidatePlugin. Each element in your schema will need to contain a validations property which is an object, with each of the validations that you want to apply to it.

import { required, email } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'
import { ref } from 'vue'

const SCHEMA = {
  firstName: {
    component: FormText,
    label: 'First Name',
    validations: {
  lastName: {
    component: FormText,
    label: 'Last Name',
    validations: {
  email: {
    component: FormText,
    label: 'Your email',
    validations: {

Next, create your new SchemaForm by using the SchemaFormFactory to inject the VuelidatePlugin.

import { SchemaFormFactory } from 'formvuelatte'
import useVuelidate from '@vuelidate'
import VuelidatePlugin from '@formvuelatte/plugin-vuelidate'

const SchemaFormWithPlugins = SchemaFormFactory([

Now that we have the component ready, we can jump into the setup function, where we need to get our v-model data ready, as well as setting up Vuelidate on our component.

setup (props, context) {
  const userData = ref({
    firstName: 'John',
    lastName: '',
    email: ''

  const $v = useVuelidate()

  return {
    schema: ref(SCHEMA),

Finally, we can go to our template and set up both the userData and the schema bindings.