How to add external javascript library to vue.js webpack application

Pt 6: How to Add External Library (Telerik Kendo UI to Vue.js application)

1. Add telerik code to /static folder

2. Add Telerik to package.json by running this npm command

npm i @progress/kendo-ui — save
“dependencies”: {
“@progress/kendo-ui”: “²⁰¹⁷.2.621”,

3. Add Telerik imports (as needed) to main.js

require(“@progress/kendo-ui/js/kendo.dropdownlist.js”);
require(“@progress/kendo-ui/js/kendo.spreadsheet”);
require(“@progress/kendo-ui/js/kendo.all”);
require(“@progress/kendo-ui/js/kendo.mobile.tabstrip”);
require(“@progress/kendo-ui/css/web/kendo.common.core.min.css”);
require(“@progress/kendo-ui/css/web/kendo.fiori.min.css”);

4. Add configuration to webpack.base.conf.js

webpack.base.conf.js
Module.exports = {
..
externals: {
kendo: ‘kendo’,
kendoSpreadsheet: ‘kendoSpreadsheet’,
},
..
}

5. Add the script loader rule for telerik kendo ui in webpack.base.conf.js

webpack.base.conf.js
module: {
rules: [
..
{
test: /\.kendo.all.min\.js$/,
use: [‘script-loader’]
},
..
]
}

(ERROR? Then add script-loader to package.json and run npm install)

npm I script-loader — save
package.json
“script-loader”: “⁰.7.0”,

6. Final Step, Use kendo in a method in a component

methods: {
downloadPDF() {
kendo.drawing.drawDOM($(‘#app’)).then(function(group) {
kendo.drawing.pdf.saveAs(group, “RestrictiveMeasuresScreenshot.pdf”);
});
},
},
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.