Formival

Automatic form generation for Vue. Inspired by Formly, but as idiomatic Vue. Making use of the awesome Vuelidate library, rather than re-inventing a new validation solution.

Installation

npm install --save formival

Usage

Bundler (Webpack, Vue CLI, Rollup)

import Vue from 'vue';
import Formival from 'formival';
Vue.use(Formival);
const formival = new Formival({
  // options
});
new Vue({
  formival,
  render: h => h(App),
}).$mount('#app');

As options when creating the Formival instance, you need to provide input types, wrappers, and validation messages:

const types = [
  {
    name: 'input',
    component: SimpleInput,
    wrappers: ['field-wrapper']
  }
];

const wrappers = [
  {
    name: 'field-wrapper',
    component: FieldWrapper
  }
];

const validationMessages = {
  required: "{{field.templateOptions.label}} is required",
  email: "{{value}} is not a valid email address"
};

const formival = new Formival({
  types,
  wrappers,
  validationMessages
});

Then you can make use of the formival-form component to embed a form anywhere:

<form @submit.prevent="onSubmit" novalidate autocomplete="off">
  <formival-form v-model="model" :validation="$v.model" :fields="fields"/>
  <button type="submit">Submit</button>
</form>

See the Docs and Examples repo for more details on usage.

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="formival/dist/formival.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/formival"></script>

License

MIT