switch vue-router to axios

Author: verwilst

package.json

@@ -25,7 +25,6 @@
     "webpack": "^2.2.1"
   },
   "dependencies": {
-    "vue-router": "^2.3.0",
-    "vue-resource": "^1.0.3"
+    "vue-router": "^2.3.0"
   }
 }

resources/assets/js/app.js

@@ -19,10 +19,7 @@ require('./bootstrap');
 import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 
-var VueResource = require('vue-resource');
-Vue.use(VueResource);
-
-Vue.http.options.root = '/api'
+axios.defaults.baseURL = '/api';
 
 const routes = [
     { path: '/', component: FirstPage },

resources/assets/js/bootstrap.js

@@ -1,4 +1,3 @@
-
 window._ = require('lodash');
 
 /**
@@ -8,6 +7,7 @@ window._ = require('lodash');
  */
 
 window.$ = window.jQuery = require('jquery');
+
 require('bootstrap-sass');
 
 /**
@@ -17,19 +17,19 @@ require('bootstrap-sass');
  */
 
 window.Vue = require('vue');
-require('vue-resource');
 
 /**
- * We'll register a HTTP interceptor to attach the "CSRF" header to each of
- * the outgoing requests issued by this application. The CSRF middleware
- * included with Laravel will automatically verify the header's value.
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-Vue.http.interceptors.push((request, next) => {
-    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
+window.axios = require('axios');
 
-    next();
-});
+window.axios.defaults.headers.common = {
+    'X-CSRF-TOKEN': window.Laravel.csrfToken,
+    'X-Requested-With': 'XMLHttpRequest'
+};
 
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
@@ -42,4 +42,4 @@ Vue.http.interceptors.push((request, next) => {
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
 //     key: 'your-pusher-key'
-// });
+// });

resources/assets/js/pages/App.vue

@@ -39,7 +39,7 @@
         font-family: 'Avenir', Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        text-align: center;
+        text-align: left;
         color: #2c3e50;
         margin-top: 60px;
     }