Vue, jQuery & Bootstrap - How do you use them?

Laravel already has jquery available so do not include it again unless you have pages outside the framework. You can check that it is installed through the Chrome console. You can look in resources/assets/js/bootstrap.js and see jquery is available globally out of the box. If you having doubts about it being available, you can run this:

if (jQuery) 
  console.dir("jQuery "+$().jquery +" loaded"); 
else
  console.dir("jQuery NOT loaded");

@ejdelmonico - But is it 'okay' to use jQuery and Vue together? Jeff says that in real life applications, it's better to disable jQuery.

@thebigk Yes, it's fine. Though you should avoid manipulating the DOM directly via jQuery and use it mainly for the plugins (you can make a wrapper component around the jQuery plugin). Of course, there are plenty of native Vue packages as well, so if you can find a suitable replacement then all the better.

Edit: here's a couple of links on how to write wrapper components around a jQuery plugin:

• https://laravel-news.com/vue-wrapper-component
• https://vuejs.org/v2/examples/select2.html

Edit2: Bootstrap also lets you use its built-in plugins via data attributes. I think that's fine too, since you don't actually need to write any logic for that.

Thank you for the links, @Nash. Yeah, there are plenty of jQuery plugins rewritten with Vue.

Not sure what you mean here: Bootstrap also lets you use its built-in plugins via data attributes. ?

Any pointers?

If you use bootstrap 4 then you can use Bootstrap + Vue package for building frond-end with bootstrap + vue.

Now days lots of packages are purely build on JavaScript use those packages to avoid jQuery. but, JQuery is one of the most widely used library.

@thebigk For example, the Bootstrap dropdown works simply by adding data-toggle="dropdown" without the need to touch any JavaScript and manually do something like $('.dropdown-menu').dropdown();.

// Taken straight from the Bootstrap 4 docs
// https://getbootstrap.com/docs/4.0/components/dropdowns
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>