vuejs-ajax

Travis Build Version Downloads

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