How to use global component from a dependancy in Vue2 - vue.js

Question

I am using vue-form-generator and trying to get it to render a simple form without success. I am going to re-use this generator in dozens of files as my application is form heavy and would like to make this global and I'll just manage everything in components.
main.js file
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.use("VueFormGenerator", VueFormGenerator);
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
I have a larger template that uses this template for most of the page, this is the template file where I am trying to use VueFormGenerator
NewTrade.vue
<template>
<div>
<p class="introText">Please try to stick to your strategy and use the Manual mode as little as possible if at all! </p>
<form action="#">
<VueFormGenerator
:schema="schema"
:model="model"
/>
</form>
</div>
</template>
<script>
export default {
data() {
return {
model: {
name: "David Johnson"
},
schema: {
fields: [
{
name: "text"
}
]
}
}
}
}
</script>
This is the error I get in Chrome.
[Vue warn]: Unknown custom element: <VueFormGenerator> - did you register
the component correctly? For recursive components, make sure to provide the
"name" option.
found in
---> <NewTrade> at src/components/NewTrade.vue
<Trading> at src/components/Trading.vue
<App> at src/App.vue
<Root>

Answer 1

just use component instead of use
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from 'bootstrap-vue';
import "./registerServiceWorker";
import VueFormGenerator from "vue-form-generator";
Vue.component("VueFormGenerator ", VueFormGenerator); // <-- component instead of use
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Usually you'd use vue-form-generator instead of VueFormGenerator as the component name here and in template, as that's the convention, but you only need that when you compile run-time.
here is a working example: https://codesandbox.io/s/o77lmqq9v6