vuejs-ajax

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