import a library into a single file component of vue.js

Question

I need to import a library in my vue component, in the documentation I explain how to install it using npm (already do this step) but not how to import it into a vue component, this is the way in which it explains how to use the files:

<link href="node_modules/webdatarocks/webdatarocks.min.css" rel="stylesheet"/>
<script src="node_modules/webdatarocks/webdatarocks.toolbar.min.js"></script>
<script src="node_modules/webdatarocks/webdatarocks.js"></script>

and this is the way to instantiate the library:

<script>
var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    report: {
        dataSource: {
            filename: "https://cdn.webdatarocks.com/data/data.csv"
        }
    }
});
</script>

So what is the best way to call this in my component?

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

This is a bit heavy.

The library is is not develop in module-like system, so the solution is make the js file imported as global.

A good library would be like const WebDataRocks = require("WebDataRocks"); or with imports, but the library is made only for end-client.

First Part - Add the JS file to the global web client

To use WebDataRocks you have to get the global variable, to get the global variable you have to inyect, as common javascript on html but with webpack.

Here are a solution for this Webpack - How to load non module scripts into global scope | window

You have to do this for webdatarocks.toolbar.min.js and webdatarocks.js

Second Part - Add the CSS

You have some options, the easy way i found to do this is use require in your <script> zone:

require('../node_modules/webdatarocks/webdatarocks.js')

Good luck!

If something fails check the paths and let us know more information about it

Alternative solution (But worse)

If you are going to use this script in a internet system, you could insert the script and CSS in the HTML. For this do:

Open index.html
Add this code on the head section:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

Rebuild

Extracted from WebDataRocks React Example

Important! this is unsafe ☣ ⚠

Make this only if you are sure about what this mean
If the webdatarocks CDN's fails, your app will also fails.

Hope it helps :)

score 1 · Answer 2 · answered Sep 11 '19 at 13:12

I did this and it works:

import WebDataRocks from 'webdatarocks'
import '@/../node_modules/webdatarocks/webdatarocks.min.css' // @ is resolved to src/ folder

I didn't import the toolbar as I don't need it:

WebDataRocks({
  container: '#pivot',
  toolbar: false,
  ...
})

import a library into a single file component of vue.js

2 Answers2

First Part - Add the JS file to the global web client

Second Part - Add the CSS

Alternative solution (But worse)

Important! this is unsafe ☣ ⚠

Linked