Search code examples
javascriptjqueryvue.jsdollar-signquasar-framework

jQuery functions in Vue components in Quasar-Framework

I'm new to web app development and I have some basic queries about jQuery and Vue, the answers to which I just can't seem to find. I have an app made in a Quasar-Framework which often uses functional references like:

- {{ $t("refer to some variable in another Vue component") }}
- $v.form.username.$touch
- $customVueComponent
- this.$q

etc. These are used both in the "template" and "script" sections of the Vue components. I am familiar with Javascript (or so I thought I was) but don't know much about jQuery. As far as I understand, these functional references are built in in jQuery and are somehow referencing some internal functionality.

It would be great if someone could explain what exactly these '$' references mean, how they work, how to use them and if there's comprehensive list of these functions to refer to.

Thank you very much

Solution

  • I am no expert but I've been working with vuejs, jquery and quasar for a while so I think I can help you with some of your doubts.

    About jQuery and VueJS

    First I'd like to say that using jQuery with VueJS is generally seen as a bad practice for VueJS developers (you can use it as long as both aren't touching the same things especially events and DOM and that you consider that you MUST use it for a certain part of your application).

    The reason to this is that the way Vue works creates conflicts with jQuery's manipulation of the DOM and events. VueJS life cycle works in a way that the DOM, where Vue is attached, gets updated pretty often to match what the instance has defined (reactivity. This means jQuery may lose track of events bound inside this context resulting in bad synergy between the two.

    Another thing is that basically anything you can do with jQuery you can already do it with Vue + plain Javascript so I only recommend using jQuery if you find it neccessary, like it was already in this old webpage you developing or because you must use a certain jQuery plugin in an already Vue-only application. For this you'll have to create separate components for each functionality you want to reproduce with your jQuery plugin with a combination of props, data, mounted and watch, basically updating the plugin manually.

    About the $ sign

    So about this $ sign. It's normal that you confused it with jQuery as '$', in the previously mentioned javascript framework, works as an abreviation for jQuery.

    For example you could either:

    jQuery("#test").val()

    or simply do this instead...

    $("#test").val()

    So that's for jQuery.

    $ sign in VueJS and Quasar

    This $ sign is used in front of the name of properties or methods which the vue instances and components have by default.

    If you've been using vue for some time you'd notice that if you want to get the reference for a particular part of the DOM or for a component you'd set a ref to it then call it using the $refs property of your Vue instance. This $refs property is a base property of Vue instances.

    There are also others like $data, $options, $el, $emit, $watch, etc. You can find more related to this properties and how VueJS uses proxying for things like $data in this article.

    Since Quasar is a VueJS framework and we know that using jQuery in VueJS isn't generally seen as a good practice, we can safely assume that Quasar devs uses this symbol for something else and not for jQuery calls. Something like naming prototypes/base objects.

    In the example you gave

    • $t is often used for Vue-i18n, an internationalization plugin. You can see about it in Quasar's page here
    • $v is used for Vuelidate, a plugin for validations in forms. In Quasar's Documentation there is a page dedicated to it here.

    • $q is quasar's base object where you can call certain plugins from them like Notify:

      this.$q.notify.create('Danger, Will Robinson! Danger!')

    You can also set sessionStorage, localStorage and call other prototypes which are injected as said here.

    tl;dr: $ is used in jQuery to abreviate the jQuery call. jQuery and Vuejs together are generally seen as a bad practice but it can be done. Quasar is a VueJS framework so it is developed using Vuejs + plain Javascript. Properties with '$' at the start of their name are prototype properties, methods and objects from both VueJS and Quasar that are repeated in every Vue instance and Quasar pages and have a purpose like easily accessing the data of a component, calling a plugin or emiting and event to the parent component.