What does the dollar prefix ($) mean in Vue.js?

Question

What is the meaning of the dollar character/symbol prefix before property names in Vue.js?

For example: this.$emit('clicked', 'demo')

Answer 1

The use of the $ and _ prefixes in Vue are explained here:

https://vuejs.org/v2/style-guide/#Private-property-names-essential

Specifically in the Detailed Explanation section.

_ is for private instance properties:

Vue uses the _ prefix to define its own private properties...

$ is for public instance properties:

As for the $ prefix, its purpose within the Vue ecosystem is special instance properties that are exposed to the user...

Both are used to avoid collisions with property names chosen by component creators, such as props and data properties.

---

The $ prefix is not only used by Vue's core APIs. It's also commonly used by libraries that add properties to components. e.g.:

• Vuex adds $store.
• Vue Router adds $route and $router.

These are both officially supported libraries but the same is true of many third-party libraries.

It can also be used by application code that creates global properties. A common example is adding $http to Vue.prototype (or globalProperties in Vue 3).

In all of these cases, the $ acts as an indicator to future developers that a property is defined elsewhere and not within the current component.