Why not use jQuery with Vue.js for AJAX?

Question

I'm trying to optimize references on a greenfield project that uses Vue.js. It also uses Bootstrap, with requires jQuery for some of its magic, so jQuery is already in the mix. While I have no intention of using its DOM manipulation tools, jQuery is already there, so is there a good reason to not just use it for the AJAX calls from within my Vue components? The syntax between jQuery and axios is fairly similar, so if I can avoid adding another library, that would be groovy.

Answer 1

The reasons behind the "don't use jQuery for AJAX in Vue" mantra are:

• If $ is already available in the component, it's more tempting to query or manipulate the DOM instead of using v-model, v-if, :class, etc..
• Axios is an excellent library for AJAX and uses less data than jQuery.
• Using jQuery could lead to a hard to maintain mix between jQuery plugins and Vue components.

My recommendation is to write a simple api.js helper file with methods such as:

api.get(url) 
api.post(url, data)
...etc.

These methods may use $.ajax internally, but when you'll upgrade to Bootstrap 5 (which doesn't require jQuery) you can change the implementation to something else.