Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue form generator

Related course:
Fullstack Vue: The Complete Guide to Vue.js

A form can be generated automatically using vue-form-generator.
You can simply define the schema, it will take care of form validation for you!

(do note that this is client side validation)

This could be as fancy as:

vuejs form

Vue form example

Start by defining a Vue instance that containsa vue-form-generator component.
Then define your model: all the input fields you want in the form.


var vm = new Vue({
el: "#app",

components: {
"vue-form-generator": VueFormGenerator.component

data: {
model: {
id: 1,
name: "Evan Elscript",
password: "Ev1n@@",
age: 30,
skills: ["Javascript", "VueJS"],
email: "evan.elscript@gmail.com",
status: true
schema: {
fields: [{
type: "input",
inputType: "text",
label: "Name",
model: "name",
readonly: false,
featured: true,
required: true,
disabled: false,
placeholder: "User's name",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
}, {
type: "input",
inputType: "number",
label: "Age",
model: "age",
min: 18,
validator: VueFormGenerator.validators.number
}, {
type: "input",
inputType: "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: ["Javascript", "AngularJS", "ReactJS", "VueJS"]

formOptions: {
validateAfterLoad: true,
validateAfterChanged: true

methods: {


Then create your template.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<!-- include vue -->
<script src="//unpkg.com/vue"></script>

<script type="text/javascript" src="//unpkg.com/vue-form-generator@2.0.0"></script>

<link rel="stylesheet" type="text/css" href="//unpkg.com/vue-form-generator@2.0.0/dist/vfg.css">
<link rel="stylesheet" type="text/css" href="style.css">


<div id="app" class="container py-5">

# Vue Form Generator

<div class="container" id="app">
<div class="panel panel-default">
<div class="panel-heading">Form</div>
<div class="panel-body">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>

<script src="app.js"></script>

Finally create your stylesheet:

html {
font-family: Tahoma;
font-size: 14px;

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;

pre {
overflow: auto;
pre .string { color: #885800; }
pre .number { color: blue; }
pre .boolean { color: magenta; }
pre .null { color: red; }
pre .key { color: green; }

h1 {
text-align: center;
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;

fieldset {
border: 0;

.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
border-color: #ddd;

.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;

padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;

.panel-body {
padding: 15px;

.field-checklist .wrapper {
width: 100%;

© vuejsexamples.net - Privacy Policy - Cookie Policy