<div id="app">
  <div class="grid-container grid-container-padded">
    <div class="grid-x grid-padding-x grid-padding-y">
      <div class="cell">
        <form-group :validator="$v.test" label="Test Field">
          <input type="text" v-model="test" @input="$v.test.$touch()">
        </form-group>
      </div>
    </div>
  </div>
</div>
Vue.use(vuelidate.default)

Vue.use(VuelidateErrorExtractor.default, {
  template: VuelidateErrorExtractor.templates.singleErrorExtractor.foundation6,
  messages: {
    required: 'Field {attribute} is required',
    minLength: 'Field {label} must be 5 symbols'
  }
})

const vueInstance = new Vue({
  el: '#app',
  data () {
    return {
      test: ''
    }
  },
  validations: {
    test: {
      required: validators.required,
      minLength: validators.minLength(5)
    }
  }
})
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js
  2. https://unpkg.com/vuelidate@0.5.0/dist/vuelidate.min.js
  3. https://unpkg.com/vuelidate@0.5.0/dist/validators.min.js
  4. https://unpkg.com/vuelidate-error-extractor/dist/vuelidate-error-extractor.js