Vue.js: Retiring vue-resource

Retiring vue-resource

Evan You has announced that the Vue.js team is retiring vue-resource. With his post, Evan is explaining the reasons behind this and offering alternatives and tips to users who may have used vue-resource for handling ajax requests in Vue applications.

The vue-resource was almost completely written and maintained by the PageKit team, even though it was listed under the Vuejs organization.

Also, Evan is highlighting that an “official ajax library” is not really necessary for Vue because:

1. Unlike routing and state-management, ajax is not a problem domain that requires deep integration with Vue core. A pure 3rd-party solution can solve the problem equally well in most cases.
2. There are great 3rd party libraries that are more actively improved/maintained, and designed to be universal/isomorphic (works in both Node and Browsers, which is important for Vue 2.0 with its server-side rendering usage).
3. Given (1) and (2), it’s obvious that we are duplicating the effort and bringing in unnecessary maintenance burdens by keeping vue-resource’s current status. The time we spend on resolving vue-resource issues can be better spent improving other parts of the stack.

This does not mean that vue-resource is deprecated. It’s just no longer part of the “official recommendation”. The repo will be moved back to pagekit/vue-resource, and will continue to work. So the users already using it are fine as they are. Potential reasons to migrate away include maintenance, universal/isomorphic support, and more advanced features.

If you would like to pick something else ($.ajax for example), taking a look at Axios is recommended. It’s currently one of the most popular HTTP client libraries and covers almost everything vue-resource provides. In addition, it is universal, supports cancellation, and has TypeScript definitions.

Performing a GET request using Axios:

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Here some tips for using Axios with Vue:

• You need to provide your own Promise polyfill when using Axios, if your target environments don't natively support it.
• If you like to access this.$http like in vue-resource, you can just set Vue.prototype.$http = axios.

The above example could be done with Vue:

Vue.prototype.$http = axios

new Vue({
  el: '#app',
  methods: {
    getUser: function() {
      this.$http.get('/user', {
          params: {
            ID: 12345
          }
        })
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})