Make HTTP Requests in a Vue App with vue-resource

The vue-resource library is a useful HTTP client library for Vue apps.

It’s a good alternative to Axios for making requests.

In this article, we’ll look at how to use it to make HTTP requests with a Vue app.

Installation

We can install the library by running:

yarn add vue-resource

or

npm install vue-resource

It can also be included with a script tag:

<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

Making Requests

To make a request, we register the plugin in main.js by writing:

import Vue from "vue";
import App from "./App.vue";
import VueResource from "vue-resource";

Vue.use(VueResource);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

Then to make the request, we write:

<template>
  <div id="app">{{response}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      response: {}
    };
  },
  async beforeMount() {
    const { bodyText } = await this.$http.get(
      "https://api.agify.io//?name=michael"
    );
    this.response = JSON.parse(bodyText);
  }
};
</script>

We call this.$http.get to make a get request to an endpoint.

To make a post request, we can write:

<template>
  <div id="app">{{response}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      response: {}
    };
  },
  async beforeMount() {
    const { bodyText } = await this.$http.post(
      "https://jsonplaceholder.typicode.com/posts",
      {
        title: "foo",
        body: "bar",
        userId: 1
      }
    );
    this.response = JSON.parse(bodyText);
  }
};
</script>

We just pass the request body into the 2nd argument.

Getting Response

We can get the response header from the headers property:

"<template>
  <div id="app">{{response}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      response: {}
    };
  },
  async beforeMount() {
    const response = await this.$http.post(
      "https://jsonplaceholder.typicode.com/posts",
      {
        title: "foo",
        body: "bar",
        userId: 1
      }
    );
    console.log(response.headers.get("Expires"));
    this.response = JSON.parse(response.bodyText);
  }
};
</script>

We pass the header key to the get method to get its value.

Getting a Blob

We can get a blob with the this.$http.get method to get a blob.

All we have to do is set the responseType to 'blob' :

"<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      response: {}
    };
  },
  async beforeMount() {
    const response = await this.$http.get(
      "https://picsum.photos/id/23/200/300",
      { responseType: "blob" }
    );
    const blob = await response.blob();
    console.log(blob);
  }
};
</script>

Interceptors

We add an interceptor to set the request header for all requests.

We can set the request headers globally by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueResource from "vue-resource";

Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.http.interceptors.push((request) => {
  request.headers.set("X-CSRF-TOKEN", "TOKEN");
  request.headers.set("Authorization", "Bearer TOKEN");
});

new Vue({
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">{{response}}</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      response: {}
    };
  },
  async beforeMount() {
    const { bodyText } = await this.$http.post(
      "https://jsonplaceholder.typicode.com/posts",
      {
        title: "foo",
        body: "bar",
        userId: 1
      }
    );
    this.response = JSON.parse(bodyText);
  }
};
</script>

We have the Vue.http.interceptors.push method to modify requests with the request.headers.set method.

Conclusion

We can use the vue-resource library to make requests in a Vue app.