0

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!

Improve this question
2
  • 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.... Commented Jul 28, 2021 at 7:50
  • There is a package available. See my answer below. Commented Jul 28, 2021 at 7:51

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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
You don't need ./../ in src. Check this cli.vuejs.org/guide/… there should be an answer for you
loadScirpt(process.env.BASE_URL+'content/...') – should work
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">?
Its work, thank you, but the scripts load asynchronously, i will add them in promise function.
|
1

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>
Improve this answer

4 Comments

The package was last updated 2 years ago and github repo link is broken. I would avoid using something like that...
The carousel is just one of many files :( @Peter Krebs
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.
Okay then follow the advice of @ishaba

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.