vee-validate-laravel-extended

Extension of vee-validate to support Laravel validations

Usage no npm install needed!

<script type="module">
  import veeValidateLaravelExtended from 'https://cdn.skypack.dev/vee-validate-laravel-extended';
</script>

README

Laravel Validations for Vee-Validate

Codacy Badge Version Vue License


vee-validate-laravel-extended allows you to interpret Laravel's response when the validations fail, thus showing up in VeeValidate ErrorBag.

💿 Installation

yarn

yarn add vee-validate-laravel-extended

npm

npm i vee-validate-laravel-extended --save

CDN

vee-validate-laravel-extended is also available on these CDNs:

When using a CDN via script tag, all the exported modules on VeeValidateLaravel are available on the VeeValidateLaravel Object.

🏁 Getting Started

In your script entry point:

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateLaravel from 'vee-validate-laravel-extended';

Vue.use(VeeValidate);
Vue.use(VeeValidateLaravel);

Now you are all setup to use the plugin.

🚀 Usage

To show the Laravel errors in VeeValidate, you must pass in the parameters the API response:

this.$setErrorsFromLaravel(e.response.data);

Example:

try {
  if (! await this.$validator.validateAll()) {
    return;
  }

  // Update profile
  await axios.post('/profile', this.profile);
} catch(e) {
  this.$setErrorsFromLaravel(e.response.data);
}

Scopes

this.$setErrorsFromLaravel(e.response.data, 'scope-name');

🚸 Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

🙈 Credits

  • Inspired by VeeValidate Laravel syntax.

🔒 License

MIT