How to make mock/make it optional?

I integrated Vee-Validate in my Form-Group component, but if the consumer doesn’t use VV, I need a graceful degrade.

Figured I can do this:

inject: {
  $validator: {
    from: '$validator',
    default() {
      return {}
    }
  }
}

Edit 2: Scrap that, it has to be more empiric:

created() {
  if (this.$root.$validator) {
    this.$validator = this.$root.$validator
  } else {
    this.$validator = {}
  }
}

But I still have to deal with the missing directive exception.

Edit 3: Ended up with this:

// Resources
import VeeValidate from 'vee-validate'

// Implementation
export default {
  directives: {
    validate: {
      ...VeeValidate.directive
    }
  },
  data() {
    return {
      $validator: {}
    }
  },
  created() {
    if (this.$root.$validator) {
      this.$validator = this.$root.$validator
    } else {
      this.$validator = new VeeValidate.Validator()
    }
  },
  computed: {
    errors() {
      return this.$validator.errors
    }
  }
}

[logaretm]

Yes you can, vee-validate supports custom component validation and v-model directive if used on the same element node. here is a basic implementation:

// Input.vue

<template lang="pug">
  .form-field
    label.u-label {{ label }}
    .input.is-rounded.is-white(:class="{ 'has-error': error }")
      input(:type="type" :value="value" ref="input" :name="name" @input="$emit('input', $event.target.value)" @blur="$emit('blur')" @change="$emit('change')")
    span.input-message(v-show="error") {{ error }}

</template>

<script>
export default {
  $_veeValidate: {
    value () {
      // the current value is the current value of the input element
      return this.$refs.input.value; 
    },
    name () {
      // use the component name prop as the field name
      return this.name;
    },
    events: 'change' // validate only on change for this component
  },
  name: 'bi-input',
  props: {
    label: {
      type: String,
      required: true
    },
    name: {
      type: String
    },
    error: {
      type: String
    },
    value: {
      type: null
    },
    type: {
      type: String,
      default: 'text',
      validator: (val) => ['text', 'password', 'tel', 'url', 'email'].includes(val)
    }
  }
};
</script>

Now you can use it like this:

<template lang="pug">
 // .... 
      ox-input(
        name="firstName"
        label="First Name"
        v-model="formData.firstName"
        data-vv-as="First Name"
        v-validate="'required'"
        :error="errors.first('firstName')"
      )
</template>

<script>
import BiInput from '~/components/Input';

export default {
  name: 'user-form',
  components: {
    BiInput 
  }
};
</script>

[adi518]

Good point. In my case, I’m developing an internal components library, so I actually want to have my validation implementation centralized and under control.