How do you properly use various JS (in this instance svg.js) libraries with vue / @ cli UI?

Question

Using Vue CLI 3 ui I have installed the following extra dependencies

• svg.js
• svg.connectable.js
• svg.draggy.js

However I cannot seem to use the libraries in app as I am unclear on how to import them properly and use across components.

latest attempe as follows in main.js;

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import SVG from 'svg.js'
// import connect from 'svg.connectable.js'
// import draggy from 'svg.draggy.js'

Vue.config.productionTip = false
Object.defineProperty(Vue.prototype, '$SVG', { value: SVG });
//Object.defineProperty(Vue.prototype, '$connect', { value: connect });
//Object.defineProperty(Vue.prototype, '$draggy', { value: draggy });


new Vue({
   router, SVG,
   render: h => h(App)
}).$mount('#app')

In my component I have the following

<template>

 <div id="spatialui">

  </div>

</template>

<script>
export default {
  name: 'spatialui',
  props: {
    object: Object
  }
}

// SVG UI needs
 var draw = SVG('spatialui').size(300, 300)

However this is not working with console complaining

[vue-router] Failed to resolve async component default: TypeError: element is null vue-router.esm.js:16
[vue-router] uncaught error during route navigation: vue-router.esm.js:16
TypeError: "element is null" vue-router.esm.js:1905

Followed by a bunch off stuff complaining about svg.js

I've tried to locate the correct way to use this library and have been running around in circles, any pointers appreciated.

router.js

import Vue from 'vue'
import Router from 'vue-router'
import start from './views/start.vue'

Vue.use(Router)

export default new Router({
   routes: [
    {
       path: '/',
       name: 'start',
       component: start
    },

     {
       path: '/home',
       name: 'home',
       component: () =>
       import(/* webpackChunkName: "home" */ "./views/home.vue")
     },
     {
       path: '/about',
       name: 'about',
       component: () =>
      import(/* webpackChunkName: "about" */ "./views/about.vue")
    }
   ]
 })

 TypeError: "element is null" createwebpack-internal:///./node_modules/svg.js/dist/svg.js:3611:1SVGwebpack-internal:///./node_modules/svg.js/dist/svg.js:24:15<anonymous>webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/spatialui.vue?vue&type=script&lang=js&:19:12./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/spatialui.vue?vue&type=script&lang=js&http://localhost:8080/home.js:35:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/spatialui.vue?vue&type=script&lang=js&:2:239./src/components/spatialui.vue?vue&type=script&lang=js&http://localhost:8080/home.js:281:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/spatialui.vue:3:97vuehttp://localhost:8080/home.js:269:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/instance.vue?vue&type=script&lang=js&:3:72./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/instance.vue?vue&type=script&lang=js&http://localhost:8080/home.js:11:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/instance.vue?vue&type=script&lang=js&:2:238./src/components/instance.vue?vue&type=script&lang=js&http://localhost:8080/home.js:185:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/components/instance.vue:3:96vuehttp://localhost:8080/home.js:173:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/views/home.vue?vue&type=script&lang=js&:2:82./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/views/home.vue?vue&type=script&lang=js&http://localhost:8080/home.js:47:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/views/home.vue?vue&type=script&lang=js&:2:234./src/views/home.vue?vue&type=script&lang=js&http://localhost:8080/home.js:329:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20<anonymous>webpack-internal:///./src/views/home.vue:3:92vuehttp://localhost:8080/home.js:317:1__webpack_require__http://localhost:8080/app.js:768:12fnhttp://localhost:8080/app.js:131:20runwebpack-internal:///./node_modules/core-js/modules/es6.promise.js:75:22notifywebpack-internal:///./node_modules/core-js/modules/es6.promise.js:92:30flushwebpack-internal:///./node_modules/core-js/modules/_microtask.js:18:9 vue-router.esm.js:1905 

Answer 1

Turns out its very simple

Use Vue CLI UI to add in the libraries you want. then import them with this line

import SVG from 'svg.js'

into the component that wishes to use said the library and use the mounted function

<template>

 <div id="spatialui">
        <!-- the SVG.js stuff appears here -->


  </div>
</template>

<script>
import SVG from 'svg.js'

export default {
  name: 'spatialui',
  props: {
    object: Object
  },

mounted: function() {
// SVG UI needs
var draw = SVG('spatialui').size(600, 300)
var rect_1 = rect(50, 50).attr({ fill: '#f06' })
}

</script>