What is the best way to include the jQuery library in Vue project?

I'm using a vue-cli, webpack and router. I have separate ponents and I need to include few jQuery plugins. If I include jQuery script in index file, then I have problem to manipulate (trigger) DOM from ponents. So I guess it's better to include all scripts in my main.js or ponents?

I need to implement Venobox plugin. This is basic jQuery initialization

$(document).ready(function(){
    $('.venobox').venobox(); 
});

In Vue i tried with

  mounted () {
    $('.venobox').venobox();
  }

Now I have problem with jQuery. '$' is not defined etc. What is the best practice to include external JS files in Vue project? Is there are ease way to initialize jQuery plugins?

Thanks!

What is the best way to include the jQuery library in Vue project?

I'm using a vue-cli, webpack and router. I have separate ponents and I need to include few jQuery plugins. If I include jQuery script in index file, then I have problem to manipulate (trigger) DOM from ponents. So I guess it's better to include all scripts in my main.js or ponents?

I need to implement Venobox plugin. This is basic jQuery initialization

$(document).ready(function(){
    $('.venobox').venobox(); 
});

In Vue i tried with

  mounted () {
    $('.venobox').venobox();
  }

Now I have problem with jQuery. '$' is not defined etc. What is the best practice to include external JS files in Vue project? Is there are ease way to initialize jQuery plugins?

Thanks!

• javascript
• jquery
• vue.js

Share Improve this question Follow asked Jun 12, 2017 at 11:14 Milan MilosevMilan Milosev 25611 gold badge33 silver badges1616 bronze badges 8

• jQuery and vue should be able to work side by side on the same page no problem. If you'd like to use jQuery inside a vue ponent, mounted() looks like a good direction to do that. Can you install jQuery on the page the same way you install Vue? – Kos Commented Jun 12, 2017 at 11:16
• Are you using plain javascript? or something like webpack? – Gerard Reches Commented Jun 12, 2017 at 11:17
• Assuming you installed jQuery with npm, you can just import it with import $ from "jquery";. – str Commented Jun 12, 2017 at 11:18
• @Kos, I installed jquery via NPM – Milan Milosev Commented Jun 12, 2017 at 11:29
• @Gerard, I am using webpack – Milan Milosev Commented Jun 12, 2017 at 11:29

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

If it's only this one ponent that uses jQuery, I'd import it exclusively inside of it and wouldn't bother with anything else. Your code was correct (initialising venobox inside the mounted lifecycle hook), but you also have to import jQuery inside your ponent:

import $ from 'jquery';

export default {
  mounted () {
    $('.venobox').venobox();
  }
}

However, if you use jQuery inside other ponents as well, I suggest looking at this answer here https://stackoverflow./a/39653758/2803743. Pasting option 1 here in case it gets removed/changed (the use of Webpack's ProvidePlugin):

Option #1: Use ProvidePlugin

Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery bees globally available to all your modules:

plugins: [
  // ...

  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

Main js file that will be piled by webpack:

window.$ = window.jQuery = require('jquery');

require('venobox/venobox');

window.Vue = require('vue');

// Register your ponents and your global Vue instance after that

I suppose that you already have the dependencies installed from your package.json file.

You simply have to import all your dependencies before registering your ponents.