How to use 3rd party libraries with VueJS?

How can we use libraries like d3.js along with Vue.js framework? I have created a view with Vue which gets a JSON from a REST call which has to be now converted into a graph using D3.js. I have downloaded the minified version of D3.js into my libs folder. How should i refer the fetched JSON to D3's api to render the SVG graph into the DOM?

Thanks for your time!

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

Mutyalarao's photo


I figured out the way.

  1. npm install --save d3 (this will include d3 in your package.json)
  2. add the 'd3' as plugin in the webpack config js
 plugins :[
     new webpack.ProvidePlugin({
            d3: "d3"


Jia's photo

hei, this will make d3 globally, is there any way to import d3 for specific component?

Jakub's photo

Just install it via npm. If you use browserify you can simply require it or import, depends on which syntax u are using.

Tyrone's photo

A few months late... We had to port our D3 charting to Vue.js recently. We decided that instead of using D3's DOM manipulation, it would be much better if we relied solely on Vue thus maintaining reactivity etc.

It turned out to be relatively easy:

  • Define the SVG elements in your Vue template, which gives you bindings etc
  • Use D3 to calculate the d property of each element in mounted(), watchers, computed properties


Corresponding blog post

Want to read more?

Browse featured discussions

© 2020 · Hashnode