A schema-based form generator component for Vue.js

Last update: Jan 25, 2017

vue-form-generator NPM version

A schema-based form generator component for Vue.js v1.x.x

Codacy Badge Build Status Coverage Status NPMS.io score Package Quality

Dependency Status devDependency Status Downloads

Vue v2.x support is under development!

Demo

JSFiddle simple example

Screenshot

Features

  • multiple objects editing
  • 27 field types
  • built-in validators
  • Bootstrap friendly templates
  • customizable styles
  • ...etc

Documentation

Online documentation on Gitbook

Dependencies

vue-form-generator use Moment.js and lodash internally.

While built-in fields don't need external dependencies, optional fields may need other libraries.
These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor.
That way, it's your choice to depend on jQuery or not.

You can find details about dependencies in documentation.

Installation

NPM

You can install it via NPM.

$ npm install vue-form-generator

Manual

Download zip package and unpack and add the vue-form-generator.css and vue-form-generator.js file to your project from dist folder.

https://github.com/icebob/vue-form-generator/archive/master.zip

Usage

">
<template>
  <div class="panel-body">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions">vue-form-generator>
  div>
template>

<script>
import VueFormGenerator from "vue-form-generator";

Vue.use(VueFormGenerator);

export default {
  data: {
  
    model: {             
      id: 1,
      name: "John Doe",
      password: "J0hnD03!x4",
      skills: ["Javascript", "VueJS"],
      email: "[email protected]",
      status: true
    },
  
    schema: {
      fields: [{
        type: "text",
        label: "ID (disabled text field)",
        model: "id",
        readonly: true,         
        disabled: true
      },{
        type: "text",
        label: "Name",
        model: "name",
        placeholder: "Your name",
        featured: true,
        required: true
      },{
        type: "password",
        label: "Password",
        model: "password",
        min: 6,
        required: true,
        hint: "Minimum 6 characters",
        validator: validators.string
      },{
        type: "select",
        label: "skills",
        model: "type",      
        values: ["Javascript", "VueJS", "CSS3", "HTML5"]
      },{
        type: "email",
        label: "E-mail",
        model: "email",
        placeholder: "User's e-mail address"
      },{
        type: "checkbox",
        label: "Status",
        model: "status",
        default: true
      }]
    },

    formOptions: {
      validateAfterLoad: true,
      validateAfterChanged: true
    }
  }
}
script>

Development

This command will start a webpack-dev-server with content of dev folder.

npm run dev

Build

This command will build a distributable version in the dist directory.

npm run build

Test

npm test

See: https://github.com/icebob/vue-form-generator/projects/1

Contribution

Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.

License

vue-form-generator is available under the MIT license.

Contact

Copyright (C) 2016 Icebob

@icebob @icebob

GitHub

https://github.com/MerifondNewMarkets/vue-form-generator
You might also like...

A Form Render Based on JSON Schema for Vue

A Form Render Based on JSON Schema for Vue

vue-schema-render A Form Render Based on JSON Schema for Vue Features 内置 ElementUI 组件 支持自定义组件 支持自由布局 支持样式覆盖 支持多语言 支持列表组件拖拽 支持无限嵌套表单以及嵌套校验,自定义校验规则 支持组件

Jan 1, 2022

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

A flexible, schema driven form component for Vue 3.

Vue 3 Live Form This component, written using TypeScript and the Vue 3 composition API, creates a schema-driven form that allows you to modify the sta

Jan 10, 2022

Vue Form 是一套基于 JSON Schema 使用 Vue.js 自动生成表单的库

Vue Form Vue Form 是一套基于 JSON Schema 使用 Vue.js 自动生成表单的库。 特性 使用 JSON Schema 校验表单(基于ajv) 使用 Form Definition 简化表单类型、属性、顺序定义 实现了常见的表单元素 支持数组动态增减、上下拖拽移动 支持编

May 11, 2022

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

Build powerful vue form with JSON schema and composition api.

Build powerful vue form with JSON schema and composition api.

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

Jun 20, 2022

Build powerful vue form with JSON schema and composition api.

Build powerful vue form with JSON schema and composition api.

Vue Form Builder Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element U

Jun 30, 2022

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

Cheetah Forms - An Json Based Form Generator for Vuetify

Cheetah Forms - An Json Based Form Generator for Vuetify

Cheetah Forms is a simple JSON form builder for generating a Vuetify Form with just a JSON

May 5, 2021
Super Form Builder built on top of Vue with Drag & Drop functionality, savable-form-schema and easy to maintain/upgrade your form.

agape-form-builder forked by vue-form-builder A simple builder to help you generate a super form for your features/modules/sites,... Easy to use, crea

Apr 5, 2021
:clipboard: A schema-based form generator component for Vue.js
:clipboard: 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 CodePen simple example Features reactive forms bas

Jul 4, 2022
A schema-based form generator component for Vue.js
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 multiple objects editing 19 built-in field

Mar 12, 2019
A extend schema-based form generator component for Vue.js
A extend schema-based form generator component for Vue.js

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

May 19, 2020
A schema-based form generator component for Vue.js
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 CodePen simple example Features reactive forms bas

Oct 28, 2019
A schema-based form generator component for Vue.js
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 CodePen simple example Features reactive forms bas

Aug 27, 2019
A schema-based form generator component for Vue.js
A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js v1.x.x Vue v2.x support is under development! Demo JSFiddle simple example Featu

Jan 25, 2017
Vue.js schema based form fields generator

vue-forminator Forminator is a "no magic", extensible, configurable, schema-based form fields factory. import Vue from 'vue'; import Forminator from '

Oct 29, 2020
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )

ncform 中文版 ncform, a nice form development way that generates form UIs and their interactions with just configuration. Comes with standard components

Jun 28, 2022
Simple, lightweight, and flexible schema-based form for Vue.js
Simple, lightweight, and flexible schema-based form for Vue.js

Simple, lightweight, and flexible schema-based form for Vue.js

May 9, 2022