Vue-form-generator: Failed to mount component: template or render function not defined.

[blackfyre]

All we did is included the form generator into our code and we're getting the error below:

[Vue warn]: Failed to mount component: template or render function not defined. 
(found in <VueFormGenerator>)

Here's the component's code, hopefully someone may be able to spot something...

<template>
    <div>
        <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
        <div class="form-group">
            <button class="btn btn-warning" @click.prevent="cancel"><i class="fa fa-times"></i> Cancel</button>
            <button class="btn btn-primary" @click.prevent="post"><i class="fa fa-save"></i> Save</button>
        </div>
    </div>
</template>
<script>

    import VueFormGenerator from "vue-form-generator";

    export default {
        components: {
            VueFormGenerator
        },
        data() {
            return {
                model: {
                    name: '',
                    email: '',
                    address: '',
                    phone: ''
                },
                schema: {
                    fields: [
                        {
                            type: 'input',
                            inputType: 'text',
                            label: 'Name',
                            model: 'name'
                        },
                        {
                            type: 'input',
                            inputType: 'email',
                            label: 'Email',
                            model: 'email'
                        },
                        {
                            type: 'input',
                            inputType: 'text',
                            label: 'Address',
                            model: 'address'
                        },
                        {
                            type: 'input',
                            inputType: 'text',
                            label: 'Phone',
                            model: 'phone'
                        }
                    ]
                },
                formOptions: {
                    validateAfterLoad: true,
                    validateAfterChanged: true
                }
            }
        },
        methods: {
            cancel() {
                this.reset();
                this.$emit('cancelled');
            },
            post() {

                let packet = {
                    name: this.model.name,
                    email: this.model.email,
                    phone: this.model.phone,
                    address: this.model.address
                };

            },
            reset() {
                this.model = {
                    name: '',
                    email: '',
                    address: '',
                    phone: ''
                }
            }
        }
    }
</script>

Also, we're using Laravel Mix 0.8.8 to build, and with Vue 2.2.1 & 2.2.3

[cristijora]

As you can see in the docs, you can register the form-generator globally like this:

import VueFormGenerator from "vue-form-generator";
Vue.use(VueFormGenerator);
````
This will automatically create a global component named `vue-form-generator`
If you want the component only locally in one of your components please see 
https://github.com/icebob/vue-form-generator/blob/master/src/index.js which is basically the 
main file when you ` import VueFormGenerator from "vue-form-generator";`

If you want to use the component locally register it like this:

import VueFormGenerator from "vue-form-generator";

components: {
VueFormGenerator.component
},
```

[blackfyre]

@cristijora Thank you for the quick reply!
The docs should be updated...

[bmf-san]

Is this work correctly??

components: {
    VueFormGenerator.component
 },

I got a syntax error.

Syntax Error: Unexpected token, expected , (22:20)

  20 |   name: 'form-builder',
  21 |   components: {
> 22 |     VueFormGenerator.component
     |                     ^
  23 |   },
  24 |   data() {
  25 |     return {

[bmf-san]

Sorry, I had been overlooked this

This works fine!

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