Import A Library Into A Single File Component Of Vue.js
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:
- Open index.html
- Add this code on the head section:
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" />
<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 :)
Solution 2:
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,
...
})
Post a Comment for "Import A Library Into A Single File Component Of Vue.js"