Why "window.$ =" assignation is optional for Vue.js import but mandatory for jQuery in a JavaScript file?

Question

I have noticed a particular behavior when I call the "require" function with Vue and with jQuery.

For Vue, I can use any of the following statement structures and my application runs without problems:

window.Vue = require('vue');
window.$ = window.Vue = require('vue');

BUT, for jQuery, I only can use:

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

... because if I try it in the way window.jQuery = require('jquery');, my jQuery animations (customized code blocks for my application) do not work. This is the jQuery animation code (it makes that a navbar burger icon show and hide the menu options located in the header of my view):

$(document).ready(function() {
    // Check for click events on the navbar burger icon
    $(".navbar-burger").click(function() {
        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
    });
});

• Why is window.$ a mandatory assignation with jQuery but not with Vue.js? Is this a mandatory assignation because of jQuery nature?
• When I use window.$ assignation with Vue, am I doing something that affects my application performance?
• Is there a universal way to do these "require" (or imports) apart from using window.$ always?
• I also noticed the pieces window.Vue and window.jQuery represent instances of the libraries and they are optional, depending on the use of libraries instances in the customized code blocks, is right this approach or their declaration improves the application performance or has any other impact?

My context: I am making these "require" calls at resources/assets/js/app.js while I am centralizing my JavaScript files for using Laravel Mix.

Thanks for your explanations. Please, I would appreciate it if you could attach a link to the documentation at jQuery or any other source that could explain in a deeper way your answers :)!

Answer 1

because if I try it in the way window.jQuery = require('jquery');, my jQuery animations (customized code blocks for my application) do not work.

It sounds like your jQuery animations depend on $ being defined as jQuery. This is pretty common: in many (most) places jQuery is used, the convention is to assign it to window.$. This will allow you to write stuff like:

$('someDiv').hover(inHandler, outHandler);

instead of the more verbose

jQuery('someDiv').hover(inHandler, outHandler);

If you changed your code to always refer to jQuery and not $, you would be able to do only

window.jQuery = require('jquery');

and your code would work (assuming no add-ons/libraries depend on the $ variable too).

(But assigning jQuery to both window.jQuery and to window.$ and proceeding to use $ as a variable name is just fine and is even probably preferable, because a reader of the code would probably expect to find jQuery in both places)

With Vue, if

window.Vue = require('vue');

works, and

window.$ = window.Vue = require('vue');

also works, then nothing in your Vue script depends on window.$ being defined; $ as a standalone variable is not referenced anywhere in your Vue.