Switching from vue-resource to axios

Question

With vue-resource, we could set the root url in main.js like so:

Vue.http.options.root = 'http://localhost:3000/api'

I tried replacing that with:

axios.defaults.baseURL = 'http://localhost:3000/api';
Vue.prototype.$http = axios

However, now my post calls don't work as expected, and Vue.http.post throws an error.

How is this achieved?

Answer 1

import axios from 'axios';

export const HTTP = axios.create({
  baseURL: `http://localhost:3000/api/`,
  headers: {
    Authorization: 'Bearer {token}'
  }
})

You could now use HTTP like so

<script>
import {HTTP} from './http-common';

export default {
  data: () => ({
    posts: [],
    errors: []
  }),

  created() {
    HTTP.get(`posts`)
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Answer 2

With axios, one can create another instance having a custom config

var my_axios = axios.create({
  baseURL: 'http://localhost:3000/api',
});

From here one can use my_axios for operations. You could prototype the custom axios instance into Vue:

Vue.prototype.$http = my_axios