Form Builder Template Implementation

Implement the Form Builder Template into your project

Import into your project

1/ Import as global component

import FormBuilder from 'v-form-builder';
Vue.component('FormBuilder', FormBuilder);

2/ Import as single component

import FormBuilder from 'v-form-builder';

export default {
    components: {FormBuilder}
    ...
}

Usage

<template>
    <div>
        // form builder template
        <form-builder type="template" v-model="formConfigData"></form-builder>
    </div>
</template>

You can use v-model in Form Builder Template, it'll return to you the form configuration data that you're configurated (object) and also render the old configuration and let you edit/update that old configuration.

Test

Go to your http://<your_vue_url_page>/ and test it :D The Form Builder Template will appear with all functionals

APIs

In order to use the API, you need to set a ref:

<form-builder type="template" v-model="formConfigData" ref="FormBuilder"></form-builder>

Get Config Value

You can use the v-model and this way too:

this.$refs.FormBuilder.getValue();

An object of your configurated form will be return.

Set Config Value

You can use the v-model and this way too:

this.$refs.FormBuilder.setValue(formDataObject);

For the best practice, I suggest you should use the v-model (2-way binding) :D