Vee-validate: Use single instance of $validator for entire application

[igorjacauna]

Is your feature request related to a problem? Please describe.
I builded a component that wrap a input element and labels like this:

<div class="form-control-wrapper">
  <div v-if="errors.has($attrs['field'])">{{ errors.first($attrs['field']) }}</div>
  <label>{{ $attrs['name'] }}</label>
  <input :name="$attrs['field']" v-validate v-model=customValue" v-bind="$attrs"/>
</div>

This is just for use with <custon-input field="username" v-model="value">

This way I don't need to write wrapper content everywhere.

But vee-validate create one instance per componente.

I catch backend errors mapped like { field: errorMessage } and try to add to ErrorBag on nuxt page that make the request.

But, in page component method, I only have access to page component $validator and cannot access custom-input $validator.

I'm making this to use in generic components with mixins, so to use $refs to get child $validator i think will turn a little more complex.

Describe the solution you'd like
There some way to configure only single $validator instance for entire application? Without use inject: false? Something like: global: true options?

Describe alternatives you've considered
For now, I'm using a $store.errors array with { field: errorMessage } objects and filling with axios error interceptor.

But I would like to use the vee-validate in cases that the rules is setted in frontend also.

[logaretm]

There is no way to globalize the errors in vee-validate, in my opinion having errors globally is just a mess. You could have multiple email fields in multiple components at the same time. The error bag would not be able to tell which email field are you requesting.

Anyways I think we should implement a Vuex store for vee-validate and you could register it in your app. So I will mark this as a feature for the time being.

[logaretm]

Revisiting this, implementing a Vuex helper proved to be more difficult than it seems, and redundant in many cases. I implemented a draft version of it but it wasn't that useful in solving your case.

You could solve your problem by using Validation Components, the Observer and Provider components are better suited to handle this than the directive and I'm considering deprecating the directive in v3 in favor of using the components only.