# Creating your own templates

# Single Error Extractor Component

If you have a custom template that you want to use (and you most probably do), then you can use the singleErrorExtractorMixin. It will give you all you need to display a single field's errors.

Below is an example implementation of such a template, using the provided by the mixin computed properties.

<template>
  <div class="form-group" :class="{ error: hasErrors }">
    <slot/>
    <div class="errors" v-if="hasErrors">
      <div class="error" v-for="error in activeErrorMessages">{{ error }}</div>
    </div>
  </div>
</template>

<script>
  import { singleErrorExtractorMixin } from 'vuelidate-error-extractor'
  
  export default {
    mixins: [singleErrorExtractorMixin]
  }
</script>

Now you can import the template and supply it to the initialize method's template option or register it yourself.

import Vue from 'vue'
import vuelidate from 'vuelidate'
import vuelidateErrorExtractor from 'vuelidate-error-extractor'

import customFormGroup from './path/to/formGroup.vue'

Vue.use(vuelidate)
Vue.use(vuelidateErrorExtractor, {
  template: customFormGroup,
  messages: messages,
})

This is it. You can extend is as much as want, as long as you implement the singleErrorExtractorMixin.

# singleErrorExtractorMixin

The singleErrorExtractorMixin is a vue mixin that provides a few convenient methods and variables for your custom templates.

# Methods

Deeply nested objects can be passed as properties and accessed via dot notation e.g. 'Error message is {deeply.nested.obj.value}' Nested messages are also supported

# Computed properties

# Error object

The error object has a structure like:

  {
     "$params": {
        "min": 5
     },
     "$dirty": false,
     "$error": false,
     "$invalid": true,
     "validationKey": "minLength",
     "hasError": true,
     "params": {
       "attribute": "Username",
       "label": "Username",
       "min": 5
     }
  }

• validationKey - Key by which the messages are extracted. Could be deep dot notation - min.string resolves in { min: { string: 'Field is required' }}

# SingleErrorExtractor Props

# Multi Error Extractor component

Creating your own multi error component is super easy. You can use our baseMultiErrorExtractor to do that.

In fact that is how the Foundation6 multi error template is implemented.

<template>
  <base-multi-error-extractor v-bind="$attrs" style="margin-top: 1rem">
    <template slot-scope="{ errorMessage }">
      <label class="form-error is-visible">{{ errorMessage }}</label>
    </template>
  </base-multi-error-extractor>
</template>

<script>
import { templates } from 'vuelidate-error-extractor'

export default {
  inheritAttrs: false,
  components: {
    baseMultiErrorExtractor: templates.multiErrorExtractor.baseMultiErrorExtractor
  }
}
</script>

The scoped slot exposes both the full error object as well as the errorMessage string.

# multiErrorExtractorMixin

If you need even more customization, you can use the multiErrorExtractorMixin.

It will provide similar props and computed properties as the singleErrorExtractorMixin.

# Methods

# Computed properties

# Props