+

+vue-form-generator NPM version +

+ +

A schema-based form generator component for Vue.js

+ +

Downloads

+ +

+Demo

+ +

JSFiddle simple example

+ +

+Features

+ + + +

+Dependencies

+ + + +

+Installation

+ +

+NPM

+ +

Installation uses the npm package manager. Just type the following command after installing npm.

+ +
$ npm install vue-form-generator
+
+ +

+Manual

+ +

Download zip package and unpack and add the vue-form-generator.js or vue-form-generator.min.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";
+
+export default {
+  ...
+  components: {
+    VueFormGenerator: VueFormGenerator.component
+  },
+
+  data: {
+    schema: { ... },
+    model:             
+      id: 1,
+      name: "John Doe",
+      password: "J0hnD03!x4",
+      skills: ["Javascript", "VueJS"],
+      email: "john.doe@gmail.com",
+      status: true
+    },
+    formOptions: {
+      validateAfterLoad: true,
+      validateAfterChanged: true
+    }
+  }
+  ...
+</script>
+ +

+Examples

+ +

+Schema sample

+ +
{
+    fields: [{
+        type: "text",
+        label: "ID",
+        model: "id",
+        readonly: true,
+        featured: false,
+        disabled: true
+    }, {
+        type: "text",
+        label: "Name",
+        model: "name",
+        readonly: false,
+        featured: true,
+        required: true,
+        disabled: false,
+        placeholder: "User's name",
+        validator: VueFormGenerator.validators.string
+    }, {
+        type: "password",
+        label: "Password",
+        model: "password",
+        min: 6,
+        required: true,
+        hint: "Minimum 6 characters",
+        validator: VueFormGenerator.validators.string
+    }, {
+        type: "email",
+        label: "E-mail",
+        model: "email",
+        placeholder: "User's e-mail address",
+        validator: VueFormGenerator.validators.email
+    }, {
+        type: "checklist",
+        label: "Skills",
+        model: "skills",
+        multi: true,
+        required: true,
+        multiSelect: true,
+        values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
+    }, {
+        type: "checkbox",
+        label: "Status",
+        model: "status",
+        multi: true,
+        readonly: false,
+        featured: false,
+        disabled: false,
+        default: true
+    }]
+}
+ +

+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

+ +

TODO

+ +

+TODO

+ + + +

+License

+ +

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

+ +

+Contact

+ +

Copyright (C) 2016 Icebob

+ +

@icebob @icebob

+ + + +