如何在 Vue.js 中使用 jquery 插件

Question

I am currently rewriting the code to Vue.js and I want to use some Jquery plugins, but I do not quite understand how to do it. For example i want to use plugin scrollbar: http://gromo.github.io/jquery.scrollbar/demo/basic.html#anchor

I understand that I have to initialize it something like this:

mounted() {
        if (process.client) {
            $(".product-page .product-filter-wr").scrollbar();
        }
    }

But for this to work, I need to insert the script connection in the code:

<script type="text/javascript" src="jquery.scrollbar.js"></script>

Actually, this is the problem. I am using template syntax, how can I connect a script to a page? How can I connect the plugin to the page correctly?

Answer 1

use

npm install jquery

after that, you need to import it

import * as $ from 'jquery'

once its done use

mounted() {
        if (process.client) {
            setTimeout(()=>{
                $(".product-page .product-filter-wr").scrollbar();
             },500);
        }
    }

make sure jquery is present in your component.

Answer 2

If you only want to include the script at a precise moment of the execution (such as the mounted hook), I advise you to use a dynamic loading library, for example loadjs .

var loadjs = require('loadjs'); // or load it using CDN

// ...

mounted() {
  if (process.client) {
    loadjs(['/jquery.js', '/jquery.scrollbar.js'], 'scrollbar');
    loadjs.ready('scrollbar', () => {
      $(".product-page .product-filter-wr").scrollbar();
    });
  }
}