0

Below is the link to the JavaScript library.

https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js

By including this library in the view as following, my VueJs component can just utilizes its d3 class and any methods inside that class.

<html>
   <body>
      <div class="my-div-class"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
      <script src="{{ url (mix('/js/my-vuejs-component.js')) }}" type="text/javascript"></script>
  </body>
</html>

Calling d3 class and its select() method in VueJsComponent, "my-vuejs-component.js":

  const el = d3.select('.my-div-class');

It works fine, but my VueJsComponent complains that d3 is not defined. It makes sense because d3 has never been defined in VueJeComponent.

How to include external JavaScript library properly so that its class or methods are available in VueJs component?

Something like this would be great if we can make it possible in VueJsComponent:

 <script>
       // This line of code is not working, just give an idea if we can convert this library into a module and import its class inside VueJs component.
       import d3 from "https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js";

       export default {
            methods: {
                test() {
                    const el = d3.select(".my-div-class");
                }  
            }
       }
 </script>

To be specific, I am working with Laravel 6.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
O Connor
  • 4,236
  • 15
  • 50
  • 91
  • this will help you [How to add external JS scripts to VueJS Components](https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components) – Narendra Jadhav Nov 20 '19 at 08:24

1 Answers1

0

Could you try to add the script below?

const script = document.createElement('script');

script.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js';

document.body.appendChild(script);
Halil İbrahim Özdoğan
  • 537
  • 1
  • 5
  • 13
  • I have not tried this yet, but so far I understand your code is that it uses JavaScript fuction to insert library into HTML body instead of including the library directly in the HTML body. But it does not seem to make `d3` available inside VueJs component. Am I wrong? – O Connor Nov 20 '19 at 08:40
  • You are totally right with your idea. But the point is Vue is not working as you thought. Btw, I agree with your idea. Somehow the normal solution is not working. Tried like an example and you will see the result ;) https://ibb.co/qxDrb5k – Halil İbrahim Özdoğan Nov 20 '19 at 13:03
  • Fortunately, I have found out that there is NPM d3 package which can be installed by running this command: `npm install d3`, With this d3 package installed, I could import d3 library like this `import * as d3 from "d3";`. Now when I call `d3.select()`, VueJs does not complain that d3 is not defined anymore. – O Connor Nov 25 '19 at 12:16
  • Wonderful, I think that you should add this answer to your question, thus people who come with the same issue can find the solution. I am happy for you – Halil İbrahim Özdoğan Nov 26 '19 at 13:03