CODEWITHSUNDEEP
laravelvue.jsaxios
yn1043
yn1043

Reputation: 588

Uncaught ReferenceError: axios is not defined in Vue.js

I am creating a SPA application with reference to the following tutorial.

http://voerro.com/en/tutorials/r/building-spas-with-laravel-5-and-vuejs-2/1

Until yesterday The top page displayed without error. But, Today I started virtual machine again and accessed it, The following javascript error occurs.

Uncaught ReferenceError: axios is not defined
at new Auth (app.js:53626)
at Module../resources/js/app.js (app.js:53554)
at __webpack_require__ (app.js:20)
at Object.0 (app.js:54214)
at __webpack_require__ (app.js:20)
at app.js:84
at app.js:87

I tried to review Git's log, but there was not a history that changed.

Do you know how to resolve this??

class Auth {
constructor () {
  this.token = window.localStorage.getItem('token');
  let userData = window.localStorage.getItem('user');
  this.user = userData ? JSON.parse(userData) : null;

  if (this.token) {
      axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token; // <-this is the error point
  }
}

....

export default Auth;

app.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Auth from './auth.js'
 import Api from './api.js';

 window.api = new Api();
 window.auth = new Auth();

 Vue.use(VueRouter);

bootstrap.js

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 
'XMLHttpRequest';

Upvotes: 1

Views: 6513

Answers (2)

James Ikubi
James Ikubi

Reputation: 2928

I realized the problem was caused due to commenting out or removing

require('./bootstrap'); /****in app.js ***/

That is if you are working with Vue in Laravel.

Note: This is not twitter Bootstrap for UI

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50767

Either use window.axios or import axios from 'axios' or vue.prototype.$axios = axios. It's a scoping issue. Don't rely on globals.

Upvotes: 2

Related Questions