A light XHR plugin for Vue 2.x and and above versions. It has many similar features with jQuery
's ajax()
and Angular
's $http()
. In addition to these, it also has its own important features:
Assets
Dynamic & async Vue components
: (componentShifter
)File uploading
History
Title
Preventing dublicate requests
Setup
npm install vue-ajax-plugin --save
You have two ways to setup vue-ajax-plugin
:
CommonJS (Webpack/Browserify)
- ES6
Vue
- ES5
var ajax = Vue
Example
Vueajax
If you want to send data to the backend:
Vueajax
Methods & Requests
Get Method
Vueajax
Arguments
url:
string
A string containing the URL to which the request is sent.
data:
object|null
A plain object that is sent to the server with the request.
configurations:
object|null
A set of key/value pairs that configure the Vue.ajax request.
Other methods and requests are the same:
Post Method
Vue.ajax.post(string url[, object data] [,object configurations])
.then(function success[, function error])
Delete Method
Vue.ajax.delete(string url[, object data] [,object configurations])
.then(function success[, function error])
Head Method
Vue.ajax.head(string url[, object data] [,object configurations])
.then(function success[, function error])
Jsonp Request
Vue.ajax.jsonp(string url[, object data] [,object configurations])
.then(function success[, function error])
Patch Method
Vue.ajax.patch(string url[, object data] [,object configurations])
.then(function success[, function error])
Put Method
Vue.ajax.put(string url[, object data] [,object configurations])
.then(function success[, function error])
All of the above methods are a shortcut method of the Vue.ajax()
:
Vue
Response Handling:
Success and error together in then()
method:
Vue.ajax(object configurations)
.then(function success[, function error])
Success and error together in in separate methods:
Vue.ajax(object configurations)
.then(function success)
.catch(function error)
Component Shifter
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.
It also supports Vue.ajax
's history
feature. And the component is automatically update when navigating to the previous - next page.
vm.componentShifter(object configurations[, function success] [,function error])
- configurations: Object
Vue.ajax
configurations. For detailed information, see.
Required properties:- is: (String) Component name
- url: (String) Request url
- success: function
Your custom callback on success. - error: function
Your custom callback on error.
Example
index.html
Link <!-- Your container component -->
app.js
var vm = el: '#classest' { return myPage: null // Component name pageLoaded: false } methods: { // Calling componentShifter this; } { if!pageLoaded this };
Vue Ajax Configurations
Assets
Assets setting is used to push new asset files (CSS or JS) in the document. Available values, string
or object
.
Pushing single asset file
Vueajax;
Pushing multiple asset files
Vueajax;
Asynchronous
Asynchronous setting should be boolean
. Default is true
.
Vueajax;
Cache
Cache setting should be boolean
. Default value is false
.
Vueajax;
Complete Event
Complete event setting should be function
.
Vueajax;
CSRF
CSRF setting should be boolean
. Default value is true
. However, in the html head tag it must be csrf-token meta
. Like this:
Vueajax;
Data
Data setting should be object
.
Vue;
File Uploading
File uploading setting should be DOM object
. We recommend using the post
method when uploading files. The important thing here is that you should not forget the name
attribute.
Vueajax;
You can only add the accept
attribute to send images.
You can add the multiple
attribute to send multiple files with an input element:
History
History setting is usage of PushState (HTML history API). History setting should be boolean
. Default value is false
.
PushState (changing the URL of the page without refreshing the page) to create a faster browsing experience. This means less elements to load and therefore faster browsing.
Vueajax;
Adding version for history
Layouts can be forced to do a hard reload when assets or html changes. First set the initial layout version in your header with a custom meta
tag.
HTTP Headers
HTTP headers setting should be object
.
Vueajax;
Method
URL data setting should be string
. Available values are:
delete
get
head
jsonp
patch
post
put
Vue;
Instead, you might prefer to use the following shorthand:
Vueajax;
Preventing Dublicate
This setting prevents sending dublicate requests to the same address or given key data.
Preventing dublicate setting should be boolean
. Default value is true
.
The following example prevents sending requests over the same URL:
Vueajax;
The following example prevents sending requests over the same given key data:
Vueajax;
Scroll Top
scrollTop setting is used to scroll to top of the document when loading the request. Default value is false
.
Vueajax;
Timeout
Timeout setting should be numeric
. Default value is 60000
(60 seconds).
(Time in milliseconds)
Vueajax;
Title
Title setting is used to change the document title value. It should be string
.
Vueajax;
URL Data
URL data setting should be object
. With this setting, you can add serialized query string to the URL you are sending.
Vueajax;
The URL will be like this when sending the request:
http://example.com?page=15&category=Accessories
With Credentials
With credentials setting should be boolean
. Default value is false
.
There is a detailed explanation here.
Vueajax;
Response Handling
The response returns the object
on the frontend. The object in general is the following structure:
data: object|null status: string statusText: string headers: string config: object xhrStatus: string request: object
Response Format
If the content type on the server is "application/json
", the response.data
is automatically converted to a JSON object
. If the content type is anything else, the result is returned as plain text
.
PHP:
header('Content-type: application/json; charset=utf-8');echo json_encode($array);
Laravel:
Route::get('respone', function () { return response(json_encode($array), 200) ->header('Content-Type', 'application/json; charset=utf-8');});
VueJS
Vueajax ;
Error Handling
In then()
method
Vueajax ; // "Error: Not Found"
In catch()
method
Vueajax ; // "Error: Not Found"
License
Copyright (c) 2018 Fatih Koca