How To Use Owl Carousel In Nuxt?

I want to make script work on every page without that these page need loaded; I have owl caroussel script on my static folder, and i already put it in nuxt.config.js, here how i pu

Solution 1:

Here, you're using some jQuery code that relies on selecting specific parts of the DOM. Meanwhile, nowadays front-end frameworks do handle the DOM in a different manner and relying more on the state or refs than actual querySelector.

Hence, I do not recommend even trying to wire it. You should probably try and use a Vue package to make the same kind of feature. It will be probably less heavy (bundle-size), more easy to integrate with your Nuxt app and you will not rely on buggy and hacky behavior.

Check this list of Carousels: https://github.com/vuejs/awesome-vue#carousel

I do use vue-awesome-swiper, more on a heavier side but really complete.

---

Also, I don't know if you really need to have jQuery in your Nuxt app on top of Vue, but if you want a clean and simple way of installing it into your Nuxt app, you follow my other answer here: https://stackoverflow.com/a/68414170/8816585

---

EDIT, even owl carouseldeprecates itself as you can see