Form builder library using VueJS 2 Virtual Dom

Last update: Feb 24, 2020

vue-form-builder

Form builder library using VueJS 2 Virtual Dom

Features

This is still currently in development as an early build.

  • Build a full form using a JavaScript object. No fiddling with HTML
  • Supports multiple output templates like bootstrap,
  • Extremely flexible, add new components or modify existing ones with ease
  • Pluggable validation. The validate.js library is supported by default.

Usage

npm install --save vue-form-builder

In your main file

import VueFormBuilder from 'vue-form-builder';
import Vue from 'vue';

Vue.use (VueFormBuilder);

In your JS:

new Vue({
  data: {
      myFormOptions: {
        name: "My Form",
        template: "bootstrap3"
      },
      myModel: {
        name: "Bobby Tables",
        address: ""
      },
      myFormSchema: [
        {key: 'name', label: "Name", type: "text"},
        {key: 'address', label: "Address", type: "textarea"},
      ]
    }
  }
})

In your template:

">
    

Custom components

You can easily add a custom component like this:

{value ? "On" : "Off"}
; });">
// Import the form registry
import { FormRegistry } from 'vue-form-builder';

// Register the component
FormRegistry.registerCustomComponent('bootstrap', // template name
  'switch', // key
  function (h, field, value, onUpdate) {
    var changeValue = () => {
      // Set the new value to the reverse of current value
      onUpdate (!value);
    };

    return 
{field.label}: {value ? "On" : "Off"}
; });

In your schema:

    myFormSchema: [
      {key: 'name', label: "Name", type: "text"},
      {key: 'address', label: "Address", type: "textarea"},
      {key: 'subscribed', label: "Subscribed", type: "switch"},
    ]

Validation

Add a validation attribute to the

">
  

In your data, you can set the constraints object. The keys should match the ones in your model/schema. This is powered by validate.js and you can read the documentation of the constraints for more advanced validiation.

  data () {
    return {
      /* ... schema and model omitted ... */

      myValidation: {
        constraints: {
          name: {
            presence: true,
            length: {minimum: 3}
          },
          address: {
            presence: true,
            length: {maximum: 5}
          },
          subscribed: {}
        }
      },
    }

GitHub

https://github.com/skyronic/vue-form-builder
You might also like...

Render fully customizable dynamic form with form-field conditional logic.

Render fully customizable dynamic form with form-field conditional logic.

Ionic Vue Form Render fully customizable dynamic form with form-field conditional logic. Install npm install ionic-vue-form

Jul 22, 2021

Vue-Table-Form: Mobile side UI-library base on Vue.js

Vue-Table-Form: Mobile side UI-library base on Vue.js

Vue-Table-Form: Mobile side UI-library base on Vue.js

Aug 6, 2019

Dynamic schema-based form rendering for VueJS

Dynamic schema-based form rendering for VueJS

FormVueLate 2.0 (Vue 3) Visit FormVueLate 3.0's full documentation for more detailed information and examples. Getting Started FormVueLate is a zero d

Jun 10, 2022

Vuejs element-ui el-form component

Vuejs element-ui el-form component

Jun 21, 2018

Form component powered by VueJS and Bulma

Form component powered by VueJS and Bulma

May 11, 2019

Generate a form using JSON Schema and Vue.js

Generate a form using JSON Schema and Vue.js

FormSchema Native Vue component form based on JSON Schema and Native HTML This is the branch for @formschema/native 2.0 Alpha, not ready for productio

Jun 25, 2022

This component is a form with validation and more using only javascript objects

ic-formly This component is a form with validation and more using only javascript objects Installation Using yarn yarn add ic-formly Using npm npm i -

Jul 30, 2020

Form Building using drag-and-drop. Uses Quasar Framework and Vue.

Form Building using drag-and-drop. Uses Quasar Framework and Vue.

QFormBuilder Simple, reusable, drag-and-drop form editor (and renderer) for Quasar (v1) and Vue.js Live Demo Application (Live demo source) Want to bu

Jul 1, 2022

Generate form based on standard json-schema and customize it using ui-schema

FFV Form For Vue Generate form based on standard json-schema and customize it using ui-schema Installation npm install --save ffv Usage Bundler (Webpa

Aug 23, 2019
Comments
  • 1. how to use the vue component type form element

    I would like to ask: how to use the vue component type form element how to use the date component such as "vue-bluma-datepicker", I try FormRegistry.registerCustomComponent ('bulma', 'datepicker', Datepicker) Can not be resolved

    Reviewed by wuchaohua at 2017-03-01 06:18
Vue Form Components - Clean & minimal vue form elements and form builder with validation

Vue Form Components - Clean & minimal vue form elements and form builder with validation

Nov 5, 2019
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Forms JSON-based Form builder for Laravel Enso This package can work independently of the Enso ecosystem. The front end implementation that utilizes t

Mar 9, 2022
A simple form-builder with drag & drop to help you deal your own form
A simple form-builder with drag & drop to help you deal your own form

A simple form-builder with drag & drop to help you deal your own form. Less code in development and your site will be more generic, configurable.

Nov 30, 2018
Reactive Form Builder for Vue.js with Laravel Support
Reactive Form Builder for Vue.js with Laravel Support

Dynamic Form Builder for Laravel with Vue.js Create even the most complex forms with ease, using two-sided validation, eloquent, nested elements, cond

Jun 22, 2022
A sample drag & drop form builder project that made with Vue.js and Element UI
A sample drag & drop form builder project that made with Vue.js and Element UI

Vue Form Builder A sample drag & drop form builder project that made with Vue.js and Element UI (View Live Demo) Build Setup # install dependencies np

Jun 30, 2022
A Bootstrap themeable Vue.js form builder

vue-formation A Bootstrap themeable Vue.js form builder Note: This project is still under initial development and provides limited support/documentati

Apr 25, 2022
Form Builder application built with quasar2, vue3 and vite

Form Builder Application (quasar-form-builder) This is a form builder application built with Vue3, TypeScript, Vite and Quasar Install the dependencie

Jun 4, 2022
form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON
form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.

Jul 5, 2022
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.

@tailwindcss/forms A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities. Installation Note th

Jul 2, 2022
Vue-form-generator: A schema-based form generator component for Vue.js
Vue-form-generator: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example Features reactive forms based on schemas multiple

Feb 4, 2019