Unable to import third party libs in vue cli based project

gregory-h commented 4 years ago

Fairly new to Vue and trying to use this lib with a vue cli based project, but this is failing on import of third party libs

in main.js

import VJsf from '@koumoul/vjsf' import '@koumoul/vjsf/dist/main.css' // load third-party dependencies (markdown-it, vuedraggable) // you can also load them separately based on your needs import '@koumoul/vjsf/dist/third-party.js'

Vue.component('VJsf', VJsf)

Produces the following

third-party.js?c5a8:1 Uncaught ReferenceError: Vue is not defined at Object.eval (third-party.js?c5a8:1) at r (third-party.js?c5a8:1) at Module.eval (third-party.js?c5a8:1) at Module.eval (third-party.js?c5a8:1) at r (third-party.js?c5a8:1) at eval (third-party.js?c5a8:1) at eval (third-party.js?c5a8:1) at Object../node_modules/@koumoul/vjsf/dist/third-party.js (app.js:1078) at __webpack_require__ (app.js:790) at fn (app.js:101)

Omitting the third party import produces a series of unknown custom element warnings // import '@koumoul/vjsf/dist/third-party.js'

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

--->

at src/components/Editor.vue

jhhammer commented 4 years ago

Did you try this #89?

kivilahtio commented 4 years ago

I have the exact same problem. I used the workaround in #89 but now I get in my console warnings about a lot of different missing v-* elements

[Vue warn]: Unknown custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VJsf>
       <VForm>
         <VCard>
           <ConfigEditor> at src/components/Admin/ConfigEditor.vue
             <VTabItem>
               <VTabsItems>
                 <VTabs>
                   <VCard>
                     <AdminMenu> at src/components/Admin/AdminMenu.vue
                       <VApp>
                         <App> at src/App.vue
                           <Root>

afaik is part of the old Vuetify 1

When I load my schema to the examples in CodePen found in the example code segments of the manual: https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/getting-started The schema is loaded and the form generated.

albanm commented 4 years ago

I just pushed a change to replace the deprecated v-layout component with v-row, these warnings should disappear after next release.

albanm commented 4 years ago

I added a section the the getting-started with a full Vue CLI based example.

koumoul-dev / vuetify-jsonschema-form

Unable to import third party libs in vue cli based project #106