Vue, what does $ means?

Question

I'm learning Vue.js and I don't understand what does the $ symbols does. Im using Laravel, I mean I'm not using the Vue-CLI. When I go to the Vue documentation, a lot of the documents does not have the $.

For example the Programmatic Navigation section says: router.push({ path: '/posts' }), but when I did it on my code I had to do this.$router.push({ path: '/posts' });

Thanks in advance.

Answer 1

In Vue, $ means that you're using a Vue instance property or an Vue instance method.

You can learn more about it on the documentation.

Answer 2

$ to differentiate vue Instance properties from user-defined properties.

Answer 3

The $ symbol is used in Vue as a prefix for property names on the Vue instance. This helps to avoid Vue instance properties injected into the Vue prototype by developers from overriding present properties. In essence, it differentiates Vue instance properties from the ones you or other library developers might inject into the Vue instance.

For example. To access the data that the Vue instance is observing you could use: vm.$data. Assuming you assigned your Vue instance to a variable called vm.

An alternative to above, if you are in an SFC(Single File Components), you can access these instances with the this keyword. Like so:

<script>
  export default {
    name: 'mySFCComponentName',
   data() {
     return {
       myData: [1, 2, 3]
    }
   },
  mounted() {
   console.log(this.$data)
  }
 }
</script>

From the above snippet, you can see I am using the $data property on the instance via the this keyword to access the data that the Vue instance is watching.

I hope this helps. Thanks,