It's time to ditch Medium for good! 🌈⚡️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

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!

Write your answer…

3 answers

Hi,

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"
        })
]

Ref: http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack

http://forum.vuejs.org/topic/882/newb-how-to-use-jquery-with-vue/6

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

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

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

Reply to this…

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

Example

Corresponding blog post

Reply to this…