Vue Formulate

What is it?

Vue Formulate is a Vue plugin that exposes an elegant mechanism for building and validating forms with a centralized data store.

Installation

First download the vue-formulate package from npm:

npm install vue-formulate

Install vue-formulate like any other vue plugin:

import Vue from 'vue'
import formulate from 'vue-formulate'

Vue.use(formulate)

Finally vue-formulate needs to access your vuex store. You can choose to.

Usage

vue-formulate automatically registers two components formulate and formulate-element. These two elements are able to address most of your form building needs. Here's a simple example:

<template>
  <formulate name="registration">
    <formulate-element
      name="name"
      type="text"
      label="What is your name?"
      validation="required"
    />
    <formulate-element
      name="email"
      type="email"
      label="What is your email address?"
      validation="required(Email address)|email"
    />
    <formulate-element
      type="submit"
      name="Register"
    />
  </formulate>
</template>

Validation Rules

There are several built in validation methods and you are easily able to add your own.

Rule	Arguments
required	label
email	label
confirmed	label, confirmation field

You can add as many validation rules as you want to each formulate-element, simply chain your rules with pipes `|'.

validation="required(My Label)|confirmed(Password Field, confirmation_field)"

Adding your own validation rules is simple, simply pass an additional object of rules in your installation:

Vue.use(formulate, {
  rules: {
    isPizza: ({field, value, error, values}, label) => value === 'pizza' ? false : `${label || field} is not pizza.`
  }
})

Validation rules expect a return of false if there are no errors, or a error message string. Validation rules are all passed an object with the field name, value of the field, error function to generate an error message, and all the values of the entire form.

Full Documentation

There are many more options available, more documentation coming soon.

2.2 KiB Raw Blame History