Import A Library Into A Single File Component Of Vue.js

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, thi

Solution 1:

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:

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

<linkhref="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" /><scriptsrc="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script><scriptsrc="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

3. 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 :)

Solution 2:

I did this and it works:

importWebDataRocksfrom'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,
  ...
})