Vue Owl Carousel | Owl Carousel in Vue JS Fix

If you have tried to use jquery version of owl carousel in your existing vuejs project or tried to convert jquery based application to vuejs you might have trouble making owl carousel to work flawlessly.

The carousel might load correctly for the first time of page reload but not after a change in routes. After trying different techniques again and again finally I found a solution that really worked. Although it might not be the optimum solution it is the working one.

What I tried :

1. Adding delay in static own carousel load function
2. Mounting owl carousel after nextTick
3. Mounting owl carousel in a window load
4. importing custom js with owl carousel mounting code and calling owl carousel each time route gets updated
5. dynamically adding src for owl carousel initiator function from jquery

Only method #5 worked until now. Here’s how I implemented it.

function addScript(src) {
   var s = document.createElement("script");
   s.setAttribute("src", src);
   document.body.appendChild(s);
 }

In your script of vuejs, add the above method.

And in your mounted function add
//path to your owl carousel initializer

 addScript("/static/js/custom.js");

and boom. Owl carousel will start working without any problem. This solution is only in the situation where you are using a jquery based template and want to migrate that to Vue js. If it’s possible to try to use vuejs based owl carousel. In new projects that would obviously be a good choice.
Thanks for reading this post. If you have any trouble please let us know in the comment section below.