# Installation

Vuelidate-error-extractor can be used with bundlers like Webpack/Rollup/Parcel or directly with CDN in the browser, but is strongly advised and preferred to use the bundler approach.

We will be using ES6 syntax for all of our examples

# With Webpack

npm i vuelidate-error-extractor -S

// main.js
import Vue from "vue";
import vuelidate from "vuelidate";
import vuelidateErrorExtractor, { templates } from "vuelidate-error-extractor";

Vue.use(vuelidate);
Vue.use(vuelidateErrorExtractor, { 
  /**
   * Optionally provide the template in the configuration. 
   * or register like so Vue.component("FormField", templates.singleErrorExtractor.foundation6)
   */
  template: templates.singleErrorExtractor.foundation6, // you can also pass your own custom template
  messages: { required: "The {attribute} field is required" }, // error messages to use
  attributes: { // maps form keys to actual field names
    email: "Email",
    first_name: "First name",
    last_name: "Last name"
  }
});

Now you can use it in your components as shown below.

<template>
  <form @submit.prevent="submitForm">
    <h1>Awesome form</h1>
    <form-group :validator="$v.form.username" label="Username">
      <input type="text" v-model="form.username" @input="$v.form.username.$touch()">
    </form-group>
  </form>
</template>
<script>
import { required, minLength } from "vuelidate/lib/validators";
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  }
};
</script>

By default, the error extractor component is registered as <form-group>, but it can be changed. See Initialization Options - name for more info.

# Exported objects

Vuelidate-error-extractor exports a few things, but you can import them separately from their files if your bundles include more than what you use (don't get tree shaken).

• default - The default export that installs the plugin in Vue.
• templates - Object containing different templates that are supported out of the box.
  • singleErrorExtractor - The available singleErrorExtractor templates
    • foundation6 - Foundation 6 singleErrorExtractor template
    • bootstrap3 - Bootstrap 3 singleErrorExtractor template
    • bootstrap4 - Bootstrap 4 singleErrorExtractor template
  • multiErrorExtractor - The available multiErrorExtractor templates
    • baseMultiErrorExtractor - A base multiErrorExtractor component, that is used to create a custom styled multi error extractor.
    • bootstrap3 - Bootstrap 3 multiErrorExtractor template
    • bootstrap4 - Bootstrap 4 multiErrorExtractor template
    • foundation6 - Foundation 6 multiErrorExtractor template
  • FormWrapper - The FormWrapper component. See FormWrapper
• singleErrorExtractorMixin - Used for building your own single field error template. See single error extractor.
• multiErrorExtractorMixin - Used for building your own summary form errors template. See multi error extractor
• configs - Object remapping vuelidate rules to another system's messages, like Laravel's. Using Validation Keys

# Initialization Options

When installing Vuelidate-error-extractor there are just a few options required.

# Direct Download/CDN

unpkg.com provides NPM-based CDN links. The link below will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vuelidate-error-extractor@0.0.1-alpha.0/dist/vuelidate-error-extractor.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate-error-extractor/dist/vuelidate-error-extractor.js"></script>

Vue.use(VuelidateErrorExtractor.default, {
  template: VuelidateErrorExtractor.templates.singleErrorExtractor.foundation6,
  messages: {
    required: "Field is required"
  }
});

const vueInstance = new Vue({
  el: "#app",
  data() {
    return {
      test: ""
    };
  },
  validations: {
    test: {
      required: validators.required
    }
  }
});

Inside your component

  <form-group :validator="$v.test" label="Test Field">
    <input type="text" v-model="test" @input="$v.test.$touch()">
  </form-group>

# Recap

This was the absolute minimum to use the plugin.

The two main installation properties you should provide are template and messages.

• template tells the plugin to use the template you provide. We currently give you 3 out of the box, but you can use your own.
• messages is the collection of error messages corresponding to each of your validation rule names.

To create your own templates, see Custom Template