How to include external js inside vue component

Question

I want to make a slide image in my app using jQuery Slide Image I get from internet. This source must include external JS and CSS.

I just want to use this external library only for certain components, so I just want to import it in only one particular component (Home Component).

My app uses webpack as a module bundler. How do I import external js file? I have tried doing it inside <script> in Vue Components like

var slide = require('assets/template/js/jssor.slider-26.1.5.min.js');

But I got error :

Error: Cannot find module "assets/template/js/jssor.slider-26.1.5.min.js"

My application structure enter image description here

If the way I imported js files is wrong, how is the right way to use this js only on home component, without all components hit if i register in index.html

Answer 1

Module paths are resolved relative to the file being compiled. In this case, to import external script you need a path like:

var slide = require('../assets/template/js/jssor.slider-26.1.5.min.js');

• Bertho Joris: Thanks @riyaz-ali for your improvement. Does this case also apply to css files?
• riyaz-ali: Yes, and it applies to pretty much any resource webpack can load... checkout how webpack resolves module paths here