Where to put variables in Vue.js components

In this tutorial, you’ll learn where to put JavaScript variables in Vue.js components.

If you’re planning to create a variable that can be used throughout your app you can declare a global variable. I’ve described it in another post.

In Vue.js components, you should declare variables in a data object. Once the Vue.js component is created all the properties found in the data object will be added to Vue’s reactivity system.

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
    ]
  }
  // ...
})

If you find this post useful, please let me know in the comments below and subscribe to my newsletter. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-variables

PS: Make sure you check other Vue.js tutorials, e.g. how to password protect your website in Vue.js, how to deploy Vue.js app to Firebase hosting.