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 ponent") }}
- $v.form.username.$touch
- $customVueComponent
- this.$q

etc. These are used both in the "template" and "script" sections of the Vue ponents. 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 prehensive list of these functions to refer to.

Thank you very much

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 ponent") }}
- $v.form.username.$touch
- $customVueComponent
- this.$q

etc. These are used both in the "template" and "script" sections of the Vue ponents. 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 prehensive list of these functions to refer to.

Thank you very much

• javascript
• jquery
• vue.js
• dollar-sign
• quasar-framework

• I'm unsure about the this.$q, but I'm pretty sure the others do not reference jQuery. In the context of Vue, you should assume that $ most likely has nothing to do with jQuery. – Taplar Commented Dec 4, 2018 at 16:12
• It's possible, but I also didn't find any function definitions for e.g. t or v, that's why I was inclined to assume that these have got something to do with jQuery. – potatoheadgear Commented Dec 4, 2018 at 18:23
• Also apparently, the $t("text") is somehow used to translate the text into the selected language of the app. – potatoheadgear Commented Dec 4, 2018 at 18:24
• Most probably you're doing it wrong. Vue is data driven. Read up on how to use vue then you will most likely drop JQuery because vue already does whatever you need jquery to do for you. – three Commented Dec 10, 2018 at 10:50

1 Answer 1

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 remend 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 ponents for each functionality you want to reproduce with your jQuery plugin with a bination 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 ponents 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 ponent 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 ponent, calling a plugin or emiting and event to the parent ponent.