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

Question

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 components 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 components. So I guess it's better to include all scripts in my main.js or components?

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!

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 component, mounted() looks like a good direction to do that. Can you install jQuery on the page the same way you install Vue? — Kos
– Kos, Commented Jun 12, 2017 at 11:16
Assuming you installed jQuery with npm, you can just import it with import $ from "jquery";. — str
– str, Commented Jun 12, 2017 at 11:18

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

If it's only this one component 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 component:

import $ from 'jquery';

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

However, if you use jQuery inside other components as well, I suggest looking at this answer here https://stackoverflow.com/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 becomes globally available to all your modules:

plugins: [
  // ...

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 12, 2017 at 21:36

kano

6,0073 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Milan Milosev Over a year ago

Thanks Kano, I also put 'require('venobox')' in my main.js file and work like a charm.

kano Over a year ago

Excellent! If this answer helped you, you may mark it as the correct one to help out future answer-seekers :)

Gerard Reches · Accepted Answer · 2017-06-12 12:00:07Z

2

Main js file that will be compiled by webpack:

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

require('venobox/venobox');

window.Vue = require('vue');

// Register your components 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 components.

answered Jun 12, 2017 at 12:00

Gerard Reches

3,1943 gold badges32 silver badges39 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related