It is a XHR plugin that works in specific features for Vue.js 2.x and and above versions. It has many similar features with jQuery's ajax() and Angular's $http().

It allows you to write more tidy code by solving many of the most common features used by developers in the core. Here are a few examples:

Prevent Duplicate Requests

One of the most common problems is the problem of sending dublicate requests at the same time. Vue.js Ajax solve it easily. You can find more information here.

File Uploading

File uploading with Ajax (XMLHttpRequest) can sometimes require you to write extra code. But it's very simple to do it with Vue.js Ajax. You can find more information here.

History

History feature to create a faster browsing experience. This means less elements to load and therefore faster browsing. But it's very simple to do it with Vue.js Ajax. There is a detailed explanation to here.

CSRF

This setting provides protection against CSRF attacks. You can find more information here.

Component Shifter

There is also Component Shifter which solves a different task. With componentShifter() you can load (with Vue.ajax) and render your Vue template (html) in your application by dynamic & async Vue.component(). You can also add components and run them nested. You can find more information here.

Setup

npm install vuejs-ajax --save

Usage

// ES6
import ajax from "vuejs-ajax"
Vue.use(ajax)

// ES5
var ajax = require("vuejs-ajax")
Vue.use(ajax)

Getting Started

The general shorthand version is as follows:

Vue.ajax.get(string url[, object data] [,object configurations])
    .then(function success[, function error])

Arguments

| Property | Required | Type | Description | | ---------------- | -------- | ---------------- | ------------------------------------------------------------- | | url | Yes | String | A string containing the URL to which the request is sent. | | data | No | Object | A plain object that is sent to the server with the request. | | configurations | No | Object | A set of key/value pairs that configure the Vue.ajax request. |

All of the above methods are a shorthand method of the Vue.ajax():

Vue.ajax({
    url: "http://example.com",
    method: "get" // post, put, patch, delete, head, jsonp
}).then(function(response) {
    console.log("Success", response.data)
}, function(response) {
    console.log("Error", response.statusText)
})

You can find detailed information about the Methods here.

Configurations

| Configuration | Type | Default | Available | | --------------------------------------------- | ---------------- | ------- | ------------------------------------------ | | assets | String Or Object | - | - | | async | Boolean | true | true, false | | cache | Boolean | false | true, false | | complete | Function | - | - | | csrf | Boolean | true | true, false | | data | Object | - | - | | fileInputs | Element Object | - | Input file upload objects | | hardReloadOnError | Boolean | false | true, false | | history | Boolean | false | true, false | | headers | Object | - | - | | method | String | get | delete, get, head, jsonp, patch, post, put | | preventDuplicate | Boolean | true | true, false | | scrollTop | Boolean | false | true, false | | timeout | Integer | 60000 | Time in milliseconds | | title | String | - | - | | url | String | - | - | | urlData | Object | - | - | | withCredentials | Boolean | false | true, false |

License

MIT

Copyright (c) 2019 Fatih Koca