Vue-form-generator: Uncaught ReferenceError: VueFormGenerator is not defined

[dflock]

Currently trying out vue-form-generator 2.0.beta1 with vuejs 2.1.6 - and everything is working well so far.

I had a little issue trying to get validators working. I'm using webpack & components and I was getting this error in the console, when trying to load a form that used a validator:

Uncaught ReferenceError: VueFormGenerator is not defined
    at VueComponent.data (eval at <anonymous> (app.js:912), <anonymous>:40:22)
    at initData (eval at <anonymous> (app.js:630), <anonymous>:1887:12)
    at initState (eval at <anonymous> (app.js:630), <anonymous>:1838:3)
    at VueComponent.Vue._init (eval at <anonymous> (app.js:630), <anonymous>:3294:5)
    at new VueComponent (eval at <anonymous> (app.js:630), <anonymous>:3414:12)
    at createComponentInstanceForVnode (eval at <anonymous> (app.js:630), <anonymous>:2484:10)
    at init (eval at <anonymous> (app.js:630), <anonymous>:2494:31)
    at eval (eval at <anonymous> (app.js:630), <anonymous>:2654:5)
    at createComponent (eval at <anonymous> (app.js:630), <anonymous>:4052:9)
    at createElm (eval at <anonymous> (app.js:630), <anonymous>:3995:9)

this would be reporting the line number in my .vue file that was setting the validator: property of a field:

...
validator: VueFormGenerator.validators.string
...

I'm sure this probably isn't the correct way to do this, but to get this to work, I ended up adding this in my main.js file, to create a global reference that I can use:

window.VueFormGenerator = VueFormGenerator

Here's all the relevant code:

main.js

import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
Vue.use(VueFormGenerator)

window.VueFormGenerator = VueFormGenerator

import MyComponent from './components/MyComponent.vue'

MyComponent.vue

<template lang='html'>
  <div id='my-component'>
    <form>
      <vue-form-generator :schema='schema' :model='model' :options='formOptions'></vue-form-generator>
    </form>
  </div>
</template>

<script>
export default {
  name: 'my-component',
  data () {
    return {
      model: {
        password: 'J0hnD03!x4'
      },
      schema: {
        fields: [
          {
            type: 'input',
            inputType: 'password',
            label: 'Password',
            model: 'password',
            min: 6,
            required: true,
            hint: 'Minimum 6 characters',
            validator: VueFormGenerator.validators.string
          }
        ]
      }
    }
  }
}
</script>

[icebob]

You don't need to add VueFormGenerator to global.
Just import it in your vue file:

<script>
import { validators } from "vue-form-generator";
export default {
  name: 'my-component',
  data () {
    return {
      model: {
        password: 'J0hnD03!x4'
      },
      schema: {
        fields: [
          {
            type: 'input',
            inputType: 'password',
            label: 'Password',
            model: 'password',
            min: 6,
            required: true,
            hint: 'Minimum 6 characters',
            validator: validators.string
          }
        ]
      }
    }
  }
}
</script>

I don't tested this code

[dflock]

I just tested it and it works, thanks!

This is an improvement, but I still couldn't get it to work with all the vue-form-generator stuff in the component. This doesn't work, for example:

<script>
import VueFormGenerator from 'vue-form-generator'

export default {
  name: 'my-component',
  components: { VueFormGenerator },
...

I get this error:

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

But if I put this stuff in main.js:

import VueFormGenerator from 'vue-form-generator'
Vue.use(VueFormGenerator)

and only do this in the component, everything works:

<script>
import { validators } from 'vue-form-generator'
export default {
...

[icebob]

Yes, because the imported VueFormGenerator is an object, what contains the component, validators and schema utils.
So if you would like to use the component, use this form:

<script>
import VueFormGenerator from 'vue-form-generator'

export default {
  name: 'my-component',
  components: { VueFormGenerator.component },
...

Other solution (as at validators)

<script>
import { component as VueFormGenerator} from 'vue-form-generator'

export default {
  name: 'my-component',
  components: { VueFormGenerator },
...

But if you need the component and validators too

import { validators, component as VueFormGenerator} from 'vue-form-generator'

[dflock]

Awesome, thank you! Also, thank you very much for all your hard work on vue-form-generator - very much appreciated :)

Also, maybe this could go into the docs, somewhere, if it's not already?

[icebob]

You're welcome! :)

I will add it to docs too.