/vue-reform

Simplify your Vue.js forms with wired-up form components that are easy to extend, inspired by Formik.

Primary LanguageVue

vue-reform

Simplify your Vue.js forms with wired-up form components that are easy to extend.

Inspired by Formik.

Features

  • keeps track of form's state (values, validation, etc.)
  • reduces the boilerplate
  • plug'n'play with custom components

Notice: vue-reform uses vee-validate under the hood for form and field validation.

Getting started

Install the library with NPM

npm install --save vue-reform

Register the library globally

import VueReform from 'vue-reform';

Vue.use(VueReform);

or import components locally

import { FormControl, FormField } from 'vue-reform';

FormField defaults to input component so you can start to build your form right away

<template>
  <form-control @submit="doFormAction">
    <form-field
      name="firstName"
      label="First name"
      placeholder="First name" />
    <form-field
      name="lastName"
      label="Last name"
      rules="required"
      placeholder="Last name" />
    <form-field
      name="email"
      label="Email"
      rules="required|email"
      placeholder="Last name" />
  </form-control>
</template>

Components

Form

form element with bounded FormControl's submit listener.

Props

  • initialValues: Object - used to initialize form data

Events

submit

Parameters:

  • values: { [name]: value }

invalid

Parameters:

  • errors: { [name]: message }
  • values: { [name]: value }

FormField

Automatically binds Form or FormControl value and errors based on the name prop.

Props

  • name: String - used to automatically bind FormControl state values to field (value, errors, field meta data)
  • label: String (optional) - label associated with the field's form control element
  • placeholder: String (optional) - placeholder for the default input field
  • vee-validate's validation-provider props

Slots

label, icon, input, error

All slots receive following props:

  • value: [String, Number] - field value, bound through the name prop
  • errors: String[] - field errors
  • on: { [event]: listener } - event listeners map that should be attached to a form element

FormControl

Top-level form component that keeps track of form's state. Form fields are passed using the default slot. Emits submit event with formBag argument.

Props

  • initialValues: Object - used to initialize form data

Events

submit

Parameters:

  • values: { [name]: value }

invalid

  • errors: { [name]: message }
  • values: { [name]: value }

Slots

default

Props:

Custom styling

All elements rendered by vue-reform components are given prefixed helper classes that can be targeted.

Here's a list per component:

  • FormControl: reform-form-control

  • Form: reform-form

  • FormField:

    • root element: reform-field
    • label wrapper element: reform-invalid, reform-dirty, reform-required, reform-changed, reform-touched, reform-pending
    • control wrapper element: reform-control

    These are optional as they're given to the default slots:

    • label: reform-label
    • default input control element: reform-input
    • error message: reform-error