Vue js add external scripts files to my app

Question

I have downloaded some HTML template that comes with custom js files and jquery. I had to attach those js to my app. and continue with Vue.

I tried many ways to add the them but still have error:

enter image description here The folders in my projects :

enter image description here

The ways i tried :

enter image description here

enter image description here

enter image description here

enter image description here

I can not find the problem!

• Michal Levý: Save yourself some headache - when using Vue, do not mix anything based on jQuery. There are lots of of good Vue native components for almost anything....
• Peter Pointer: There is a package available. See my answer below.

Answer 1

You should put this scripts not to src but to public folder and use static path 'static/content/...' or 'public/content/...' or better process.env.PUBLIC_URL + 'content/...' depends on your build config.

• Alaa Hameed: I move the js file to frontend/app/public and i call it as: <script type="application/javascript" defer src="./../public/js/vendor/owl.carousel.min.js"></script> but is still not seen @ishaba
• ishaba: You don't need ./../ in src. Check this cli.vuejs.org/guide/… there should be an answer for you
• ishaba: loadScirpt(process.env.BASE_URL+'content/...') – should work
• ishaba: No need to define it manually. What is result when you try? loadScirpt(process.env.BASE_URL+'content/...') or <script src="<%= BASE_URL %>js/vendor/owl.carousel.min.js">?
• Alaa Hameed: Its work, thank you, but the scripts load asynchronously, i will add them in promise function.

Answer 2

You want to import the module like any other. See package documentation:
https://www.npmjs.com/package/vue-owl-carousel2

Installation

npm i -s vue-owl-carousel2

or

yarn add vue-owl-carousel2

Usage

import carousel from 'vue-owl-carousel2'
export default {
 components: { carousel },
}

Basic Usage

<carousel>
 <img src="https://placeimg.com/200/200/any?1">
 <img src="https://placeimg.com/200/200/any?2">
 <img src="https://placeimg.com/200/200/any?3">
 <img src="https://placeimg.com/200/200/any?4">
</carousel>

• Michal Levý: The package was last updated 2 years ago and github repo link is broken. I would avoid using something like that...
• Alaa Hameed: The carousel is just one of many files :( @Peter Krebs
• Peter Pointer: The package is almost that old in general with a newer version teased. If it is not available as a package the OP should use another.
• Peter Pointer: Okay then follow the advice of @ishaba