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 ponents, so I just want to import it in only one particular ponent (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

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

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 ponents, so I just want to import it in only one particular ponent (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

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

• javascript
• vuejs2
• vue-ponent

1 Answer 1

Module paths are resolved relative to the file being piled. 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');