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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.