by Sai gowtham

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

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course