Vue-formulario NPM

Vue Formulario

Form validator with mongoose-like schema validator for Vue 3.

🔑 Mogoose-like schema validation
💡 Validate on submit
⚡️ Validate while typing
🛠️ Custom formats and keywords
:speech_balloon: Custom error messages

Try it!

Install via NPM

$ npm install vue-formulario

Install via CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-formulario"></script>
<script>
  const { Formulario, Validation } = VueFormulario
  const app = Vue.createApp({
    data () {
      return {
        form: {
          name: '',
          email: ''
        },
        schema: {
          name: {
            type: String,
            required: true
          },
          email: {
            type: String,
            format: 'email',
            required: [true, 'Custom error message']
          }
        }
      }
    }
  })
  app.use(Formulario)
  app.use(Validation)
  app.mount('#app')
</script>

Register as Component

import { Formulario, Validation } from 'vue-formulario'

export default {
  components: {
    Formulario,
    Validation
  }
}

Quick example

<template>
  <Formulario v-model="form" :schema="schema" @validated="submitForm" @error="errorHandler">
    <Validation for="firstName">
      <label>First name</label>
      <input v-model="form.firstName" type="text">
    </Validation>
    <Validation for="lastName">
      <label>Last name</label>
      <input v-model="form.lastName" type="text">
    </Validation>
    <Validation for="email">
      <label>Email</label>
      <input v-model="form.email" type="text">
    </Validation>
  </Formulario>
</template>

<script>
import { Formulario, Validation } from 'vue-formulario'

export default {

  name: 'App',

  components: {
    Formulario,
    Validation
  },

  data () {
    return {
      form: {
        firstName: '',
        lastName: '',
        email: ''
      },
      schema: {
        firstName: {
          type: String,
          required: true
        },
        lastName: {
          type: String
          required: [true, 'Custom error message']
        },
        email: {
          type: String,
          format: 'email'
        }
      }
    }
  }

}
</script>