title: Vue.prototype is undefined on first load of the page
body: <p>So, I'm trying to make a request with axios in my <code>main.js</code> file.</p>
  
  <p>I'm using, as shown, vue-router to make this request before each component is loaded. However, I'm not able to get this to work when my webpage is loaded for the first time. I mean, axios request is done after the component is loaded. Then, this is going to fail:</p>
  
  <pre><code>mounted() {
      if (Vue.prototype.$user.role == "Owner") {
        this.isOwner = true;
        this.estancoId = Vue.prototype.$user.estanco;
      }
    },
  </code></pre>
  
  <p>It shows me this error on the console log:</p>
  
  <pre><code>[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'role' of undefined"
  
  found in
  
  ---&gt; &lt;Header&gt; at src/components/Header.vue
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  </code></pre>
  
  <p>I tried to make this request with an async/await, I tried methods <code>mounted(), created(), beforeMount(), beforeCreate()</code> but still it's the same. I'm new to Vue.js, and I am stuck here and don't know what to do.</p>
  
  <p><strong>Edit with the whole files to see the app structure:</strong>
  <strong>main.js</strong></p>
  
  <pre><code>import router from './router'
  import Vue from 'vue'
  import App from './App.vue'
  import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  import axios from 'axios'
  import Vuex from 'vuex'
  
  // Install BootstrapVue
  import 'leaflet/dist/leaflet.css';
  
  Vue.use(BootstrapVue)
  // Optionally install the BootstrapVue icon components plugin
  Vue.use(IconsPlugin)
  Vue.use(axios)
  Vue.use(Vuex)
  Vue.config.productionTip = false
  
  const store = new Vuex.Store({
    state: {
      user : {}
    },
    mutations : {
      set_user (state,user) {
        state.user = user
      }
    }
  })
  
  export default store
  
  /* eslint-disable */
  router.beforeEach((to, from, next) =&gt; {
    if (from.path.indexOf("modificarCatalogo") == -1 &amp;&amp; to.path.indexOf("modificarCatalogo") == -1) {
      localStorage.removeItem("catalogue");
    }
    if (localStorage.getItem("token") != null) {
      axios
        .get(`${process.env.VUE_APP_API_BASE_URL}/user/role`, {
          headers: {
            Authorization: "Token " + localStorage.getItem("token")
          }
        })
        .then(response =&gt; {
          store.commit('set_user', response.data);
          console.log("First then")
          console.log(store.state.user)
        }).catch(function (error) {
           // handle error case here
           console.log(error);
  
        }).then(function () {
           // always executed
           console.log("Second then")
           next();
        });
       }else{
          next();
       }
  });
  /* eslint-enable */
  
  Vue.use(router)
  
  new Vue({
    router,
    render: h =&gt; h(App),
  }).$mount('#app')
  </code></pre>
  
  <p>It has now Vuex because I tried @ellisdod answer but </p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;Header /&gt;
      &lt;router-view /&gt;
      &lt;Footer /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And, in <strong>Header.vue</strong>, it is where I make the call to, in this case, Vuex $store, but it is the same. I need it to be done everywhere, so I tried to call the method in App.vue but still no results, it returns an empty object now with the solution of Vuex, but just empty, not with user data.</p>
  
  <pre><code>export default {
    name: "Header",
    data() {
      return {
        token: localStorage.getItem("token"),
        isOwner: "",
        estancoId: ""
      };
    },
    mounted() {
      console.log("Header log")
      if (this.$store.state.user.role == "Owner") {
        this.isOwner = true;
        this.estancoId = this.$store.state.user.estanco;
      }
    },
  </code></pre>
  
  <p>The rest of the components are irrelevant I think</p>