Vue Resouce

In Vue applications we use vue-resource to communicate with the server.

HTTP Status Codes


When making a request to the server, you will most likely need to access the body of the response. Use .json() to convert. Because .json() returns a Promise the follwoing structure should be used:

    .then(resp => resp.json())
    .then((data) => {;
    .catch(() => new Flash('Something went wrong'));

When using Poll (app/assets/javascripts/lib/utils/poll.js), the successCallback needs to handle .json() as a Promise:

  successCallback: (response) => {
    return response.json().then((data) => {
      // handle the response


Some endpoints - usually delete endpoints - return 204 as the success response. When handling 204 - No Content responses, we cannot use .json() since it tries to parse the non-existant body content.

When handling 204 responses, do not use .json, otherwise the promise will throw an error and will enter the catch statement:

    .then(() => {
      // success!
    .catch(() => {
      // handle error


Headers are being parsed into a plain object in an interceptor. In Vue-resource 1.x headers object was changed into an Headers object. In order to not change all old code, an interceptor was added.

If you need to write a unit test that takes the headers in consideration, you need to include an interceptor to parse the headers after your test interceptor. You can see an example in spec/javascripts/environments/environment_spec.js:

  import { headersInterceptor } from './helpers/vue_resource_helper';

  beforeEach(() => {

  afterEach(() => {
    Vue.http.interceptors = _.without(Vue.http.interceptors, myInterceptor);
    Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);

CSRF token

We use a Vue Resource interceptor to manage the CSRF token. app/assets/javascripts/vue_shared/vue_resource_interceptor.js holds all our common interceptors. Note: You don't need to load app/assets/javascripts/vue_shared/vue_resource_interceptor.js since it's already being loaded by common_vue.js.