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 put it:

head: {
    title: 'title',
    htmlAttrs: {
        lang: 'en'
    },
    meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' },
        { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [{
            src: process.env.BASE_URL_ROOT + "/jquery-3.3.1.min.js",
            type: "text/javascript"
        },
        {
            src: process.env.BASE_URL_ROOT + "/owl.carousel.min.js",
            type: "text/javascript"
        },
        {
            src: process.env.BASE_URL_ROOT + "/main-script.js",
            type: "text/javascript"
        }
    ]
},

And there is the script on my main-script.js:

$(document).ready(function() {

$('.owl-menu').owlCarousel({
    loop: true,
    responsiveClass: true,
    center: true,
    items: 6,
    nav: true,
    dots: false,
    autoWidth: true,
    responsive: {
        600: {
            items: 6,
            nav: true,
            autoWidth: true,
            center: true,
            loop: true
        },
    }
})

$('.owl-video').owlCarousel({
    loop: true,
    center: true,
    items: 3,
    margin: 10,
    nav: true,
    dots: true,
    responsive: {
        600: {
            items: 3,
            margin: 12,
        },
    },
    navContainer: "#nav-conte",
    navText: [
        '<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
        '<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
    ]
})
})

The caroussel work well on the page if the page is loaded, but if it come from nuxt navigation, the caroussel script not work anymore.

---

Solution that i used is MutationObserver that look at the change on the DOM; on my main-script.js:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // my owl caroussel script
});

observer.observe(document, {
    subtree: true,
    attributes: true
});

Answer

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 carousel deprecates itself as you can see