title: How to initialize NCForms library in VueJs
body: <p>I'm new to Vue CLI, and I'm trying to build a small application. As part of this I want to generate some forms.</p>
  <p>I've tested a few libraries, and NCForms seems to do all I need to do. (specifically, I need to handle capturing of multiple arrays).</p>
  <p>I tried to initialize the library as described in the documentation - but it fails in the Template saying that it can't find some of the element-ui components.</p>
  <p>I'm pretty sure that I've followed the instructions properly - but I must be missing something small.</p>
  <p>My main.js file looks like this:</p>
  <pre><code>import 'ant-design-vue/lib/style/index.less' // antd core styles
  import './@kit/vendors/antd/themes/default.less' // default theme antd components
  import './@kit/vendors/antd/themes/dark.less' // dark theme antd components
  import './global.scss' // app &amp; third-party component styles
  
  import Vue from 'vue'
  import VuePageTitle from 'vue-page-title'
  import NProgress from 'vue-nprogress'
  import VueLayers from 'vuelayers'
  import BootstrapVue from 'bootstrap-vue'
  import VueFormulate from '@braid/vue-formulate'
  
  // Form generator: Vue-Form-Generator: https://github.com/vue-generators/vue-form-generator
  import VueFormGenerator from 'vue-form-generator'
  import 'vue-form-generator/dist/vfg.css'
  
  // Form generator: NCForms: https://github.com/ncform/ncform
  import vueNcform from '@ncform/ncform'
  // eslint-disable-next-line no-unused-vars
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  import ncformStdComps from '@ncform/ncform-theme-elementui'
  
  // REST Calls: Axios: https://github.com/axios/axios
  import axios from 'axios'
  
  // Local files
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import { i18n } from './localization'
  import './antd'
  import './registerServiceWorker'
  
  // mocking api
  import './services/axios/fakeApi'
  
  Vue.use(BootstrapVue)
  Vue.use(VueLayers)
  Vue.use(NProgress)
  Vue.use(VuePageTitle, {
    prefix: 'Nedbank PhishTank | ',
    router,
  })
  // Form generator: Vue-Form-Generator
  Vue.use(VueFormGenerator)
  // Form generator: NCForms
  Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })
  window.$http = Vue.prototype.$http = axios
  
  Vue.use(VueFormulate)
  Vue.config.productionTip = false
  const nprogress = new NProgress({ parent: 'body' })
  new Vue({
    router,
    store,
    nprogress,
    i18n,
    render: h =&gt; h(App),
  }).$mount('#app')
  </code></pre>
  <p>My template looks like this:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;ncform :form-schema=&quot;formSchema&quot; form-name=&quot;settings-form&quot; v-model=&quot;item&quot; @submit=&quot;submit()&quot;&gt;&lt;/ncform&gt;
      &lt;el-button @click=&quot;submit()&quot;&gt;Submit&lt;/el-button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        formSchema: {
          type: 'object',
          properties: {
            name: {
              type: 'string',
            },
          },
        },
        item: {
          name: 'Peter Pan',
        },
      }
    },
    methods: {
      submit () {
        this.$ncformValidate('settings-form').then(data =&gt; {
          if (data.result) {
            console.log(this.$data.formSchema.value)
            // do what you like to do
            alert('finally!!!')
          }
        })
      },
    },
  }
  &lt;/script&gt;
  
  </code></pre>
  <p>The error is:
  <em>Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the &quot;name&quot; option.</em></p>
  <p>Am I missing something like registering the individual components? I thought this line would take care of it: Vue.use(vueNcform, { extComponents: ncformStdComps, lang: 'en' })</p>
  <p>It feels like I should put something into the &quot;new Vue()&quot; statement - but I'm not sure what....</p>