How to declare a global variable in Vue.js

How to declare a global variable in Vue.js

In this tutorial, we are going to learn about how to declare a global variable in vuejs with the help of an example.

Sometimes we need to access a particular data throughout our app components in such cases we can create a global variable in vuejs by using this syntax Vue.prototype.$variablename.

where $ is a naming convention to declare global variables.

Declaring a variable

In this example, we are declaring a $axios global variable so that we can directly use axios in our components to make http requests.

Open you main.js file and add the below code.

main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

//global variable
Vue.prototype.$axios = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

Accessing global variable

Now we can access $axios global variable from any component instance.

App.vue
<template>
  <div id="app">
    <ul v-for="user in users" :key="user.id">
      <li>{{user.id}}</li>
      <li>{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      users: []
    };
  },
  created: function() {
    this.$axios.get("https://jsonplaceholder.typicode.com/users")    .then(res => {
      this.users = res.data;
    });
  }
};
</script>

output:

vue-global-variable-example