Package Exports

vue-resource

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-resource) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-resource

Resource plugin for Vue.js.

The plugin provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

Setup

Webpack/Browserify

Add vue and vue-resource to your package.json, then npm install, then add these lines in your code:

var Vue = require('vue');

Vue.use(require('vue-resource'));

Configuration

Set default values using the global configuration.

Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

Set default values inside your Vue component options.

new Vue({

    http: {
      root: '/root',
      headers: {
        Authorization: 'Basic YXBpOnBhc3N3b3Jk'
      }
    }

})

HTTP

The http service can be used globally Vue.http or in a Vue instance this.$http.

Methods

get(url, [data], [options])
post(url, [data], [options])
put(url, [data], [options])
patch(url, [data], [options])
delete(url, [data], [options])
jsonp(url, [data], [options])

Options

url - string - URL to which the request is sent
method - string - HTTP method (e.g. GET, POST, ...)
data - Object|string - Data to be sent as the request message data
params - Object - Parameters object to be appended as GET parameters
headers - Object - Headers object to be sent as HTTP request headers
beforeSend - function(request) - Callback function to modify the request object before it is sent
emulateHTTP - boolean - Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header
emulateJSON - boolean - Send request data as application/x-www-form-urlencoded content type
xhr - Object - Parameters object to be set on the native XHR object
jsonp - string - Callback function name in a JSONP request
timeout - number - Request timeout in milliseconds (0 means no timeout)

Example

new Vue({

    ready: function() {

      // GET request
      this.$http.get('/someUrl').then(function (response) {

          // get status
          response.status;

          // get all headers
          response.headers();

          // get 'expires' header
          response.headers('expires');

          // set data on vm
          this.$set('someData', response.data)

      }, function (response) {

          // handle error
      });

    }

})

Resource

The resource service can be used globally Vue.resource or in a Vue instance this.$resource.

Methods

resource(url, [params], [actions], [options])

Default Actions

get: {method: 'GET'},
save: {method: 'POST'},
query: {method: 'GET'},
update: {method: 'PUT'},
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}

Example

new Vue({

    ready: function() {

      var resource = this.$resource('someItem{/id}');

      // get item
      resource.get({id: 1}).then(function (response) {
          this.$set('item', response.item)
      });

      // save item
      resource.save({id: 1}, {item: this.item}).then(function (response) {
          // handle success
      }, function (response) {
          // handle error
      });

      // delete item
      resource.delete({id: 1}).then(function (response) {
          // handle success
      }, function (response) {
          // handle error
      });

    }

})

Interceptors

Interceptors can be defined globally and are used for pre- and postprocessing of a request.

Vue.http.interceptors.push({

    request: function (request) {
        return request;
    },

    response: function (response) {
        return response;
    }

});

Interceptor Factory

If Promises are needed inside of a Interceptor, a factory function can be used.

Vue.http.interceptors.push(function (Promise) {
    return {

            request: function (request) {
                if (reject) {
                    return Promise.reject();
                }
            },

            response: function (response) {
                if (reject) {
                    return Promise.reject();
                }
            }

       };
});