Vue API Request provides a full control on your APIs, making the calls simple, fast and easy to implement. Also, your code will be cleaner and more elegant.
Package is installable via NPM
$ npm i vue-api-request --save
or via Yarn
$ yarn add vue-api-request
or via CDN
<script src="https://unpkg.com/vue-api-request@latest/dist/vue-api-request.min.js"></script>
<link href="https://unpkg.com/vue-api-request@latest/dist/vue-api-request.min.css" rel="stylesheet"/>
It will set window.VueApiRequest
as the module.
You have to import the library and use as a Vue plugin to enable the functionality globally on all components.
import Vue from 'vue'
import VueApiRequest from 'vue-api-request'
Vue.use(VueApiRequest)
<api-request :resource="apiRequest" v-model="apiResponse">
My stuffs to be shown when the API loads
</api-request>
You may also set your own default configuration, so you don't need to customize every time each ApiRequest component. You are still able to customize a specific component using props.
import Vue from 'vue'
import VueApiRequest from 'vue-api-request'
let options = {
effect: 'lightSpeedIn',
resp: 'body.foo.bar',
spinner: 'DotLoader',
spinnerColor: 'blue', //or #0000ff
spinnerPadding: '2em',
spinnerScale: 1.4,
onSuccess: resp => {
console.log('Success', resp)
},
onError: resp => {
alert(`Error: ${resp.message}`)
}
}
Vue.use(VueApiRequest, options)
The 'options' variable above is equivalent of:
<api-request
:resource="apiRequest"
v-model="apiResponse"
effect="lightSpeedIn"
resp="body.foo.bar"
spinner="DotLoader"
spinner-color="blue"
spinner-padding="2em"
:spinner-scale="1.4"
@success="successEvent"
@error="errorEvent"
>
My stuffs to be shown when the API loads
</api-request>
Go to Demo & Docs to further informations.
# clone project
git clone https://github.com/ftgibran/vue-api-request.git
cd vue-api-request
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
MIT Copyright (c) 2017 Felipe Gibran