How to use an external Javascript library with a Vue.js cli project?

Question

I recently made my first Vue.js project with Vue CLI. I want to import SVG.js so I installed it with

npm install @svgdotjs/svg.js

My /src/components/Map.vue file:

<template>
  <div id="drawing"></div> 
</template>

<script>
  import SVG from '@svgdotjs/svg.js';
  export default {
    name: 'Map'
  }      
  let draw = SVG('drawing').size(300, 300) // TypeError
</script>

<style>
</style>

The browser complains when I use the SVG function with the error:

Map.vue?108f:10 Uncaught TypeError: _svgdotjs_svg_js__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
    at eval (Map.vue?108f:10)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Map.vue?vue&type=script&lang=js& (app.js:954)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (Map.vue?d6e9:1)
    at Module../src/components/Map.vue?vue&type=script&lang=js& (app.js:2526)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (Map.vue?9397:1)
    at Module../src/components/Map.vue (app.js:2514)

How should I use or import the SVG library with Vue.js?

bcjohn · Accepted Answer · 2019-02-16 16:13:32Z

1

You should use SVG in the export default {} block.

For example

export default {
  mounted() {
    let draw = SVG("drawing").size(300, 300);
  }
};

answered Feb 16, 2019 at 16:13

bcjohn

2,54315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MatMis Over a year ago

Then I got this:

[Vue warn]: Error in mounted hook: "TypeError: _svgdotjs_svg_js__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function"

bcjohn Over a year ago

Did you use Vue CLI 3 ?

MatMis Over a year ago

Yes, I created the project in January 2019 using Vue UI

bcjohn Over a year ago

I don't quite sure why npm install @svgdotjs/svg.js can't work. However, i found you can npm install svg.js and then import SVG from 'svg.js'. That should be work.

Collectives™ on Stack Overflow

How to use an external Javascript library with a Vue.js cli project?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related