Vuejs2- Issue in vue-form-generator - vuejs2

Question

I am using "vue-form-generator" plugin for loading fields dynamically but I have encountered an error
[Vue warn]: Failed to mount component: template or render function not defined. found in vue-form-generator
Here is my code:
<template>
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</template>
<script>
import Vue from 'vue'
import VueFormGenerator from "vue-form-generator";
Vue.use(VueFormGenerator);
export default {
components: { VueFormGenerator },
data: () => ({
model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
skills: ["Javascript", "VueJS"],
email: "john.doe#gmail.com",
status: true
},
schema: {
fields: [{
type: "input",
inputType: "text",
label: "ID (disabled text field)",
model: "id",
readonly: true,
disabled: true
},{
type: "input",
inputType: "text",
label: "Name",
model: "name",
placeholder: "Your name",
featured: true,
required: true
},{
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
},{
type: "select",
label: "Skills",
model: "skills",
values: ["Javascript", "VueJS", "CSS3", "HTML5"]
},{
type: "input",
inputType: "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>

Answer 1

To use it as local component, you should use this syntax
import VueFormGenerator from "vue-form-generator";
//component javascript
export default{
components:{
"vue-form-generator": VueFormGenerator.component
}
}
If you use
import VueFormGenerator from "vue-form-generator";
Vue.use(VueFormGenerator);
then it already registered VueFormGenerator as global. You don't need to register in components section of your code.
Here is our code with local component:
<template>
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</template>
<script>
import Vue from 'vue'
import VueFormGenerator from "vue-form-generator";
export default {
components:{
"vue-form-generator": VueFormGenerator.component
},
data: () => ({
model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
skills: ["Javascript", "VueJS"],
email: "john.doe#gmail.com",
status: true
},
schema: {
fields: [{
type: "input",
inputType: "text",
label: "ID (disabled text field)",
model: "id",
readonly: true,
disabled: true
},{
type: "input",
inputType: "text",
label: "Name",
model: "name",
placeholder: "Your name",
featured: true,
required: true
},{
type: "input",
inputType: "password",
label: "Password",
model: "password",
min: 6,
required: true,
hint: "Minimum 6 characters",
validator: VueFormGenerator.validators.string
},{
type: "select",
label: "Skills",
model: "skills",
values: ["Javascript", "VueJS", "CSS3", "HTML5"]
},{
type: "input",
inputType: "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>