This is just a simple extension to the default input element which shows an SVG icon if valid or not.


$ npm install vue-validation-input


  <div id="app">
    <vue-validation-input :readonly="true" :placeholder="'Placeholder text'"></vue-validation-input>
    <vue-validation-input :minlength="5" maxlength="10"></vue-validation-input>
    <vue-validation-input :class="'customClass'" :pattern="Hello\nworld"></vue-validation-input>
    <vue-validation-input :class="['customClass', 'customClass2']" valid-color="'green'"></vue-validation-input>

import VueValidationInput from 'vue-validation-input'

export default {
  components: {


Prop Type Default Description
container-class String, Array, Object "" Binding class for input container
input-class String, Array, Object "" Binding class for input
icon-class String, Array, Object "" Binding class for SVG icon
placeholder String "" Placeholder text
pattern String "" A regular expression the input's contents must match in order to be valid
readonly Boolean false Boolean controller if input is read-only
minlength Number 1 The minimum length of input to be considered as valid
maxlength Number -1 The maximum allowed number of characters
valid-color String #33AF28 Valid SVG icon color
invalid-color String #EE0202 Invalid SVG icon color


Event Type Output
vue-validation-output Object { value: String, valid: Boolean }