Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ftgibran/vue-api-request
Control your API calls by using an amazing component which supports axios and vue-resource
https://github.com/ftgibran/vue-api-request
ajax api axios component loader request vue-resource vuejs
Last synced: about 2 months ago
JSON representation
Control your API calls by using an amazing component which supports axios and vue-resource
- Host: GitHub
- URL: https://github.com/ftgibran/vue-api-request
- Owner: ftgibran
- License: mit
- Created: 2017-07-15T01:37:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T04:12:27.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T08:05:06.177Z (5 months ago)
- Topics: ajax, api, axios, component, loader, request, vue-resource, vuejs
- Language: JavaScript
- Homepage: https://ftgibran.github.io/#/vue-api-request
- Size: 683 KB
- Stars: 128
- Watchers: 9
- Forks: 9
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue API Request
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.
## [Docs & Demo](https://ftgibran.github.io/#/vue-api-request)
## Installation
Package is installable via NPM
```bash
$ npm i vue-api-request --save
```
**or** via Yarn
```bash
$ yarn add vue-api-request
```
**or** via CDN
```html
```
It will set `window.VueApiRequest` as the module.
[See example in JSFiddle](https://jsfiddle.net/gibranmax/everjv20/)
## Basic Usage
You have to import the library and use as a Vue plugin to enable the functionality globally on all components.
```javascript
import Vue from 'vue'
import VueApiRequest from 'vue-api-request'
Vue.use(VueApiRequest)
```
### Example
```html
My stuffs to be shown when the API loads
```
## Pre Configuration
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.
### Example
```javascript
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:
```html
My stuffs to be shown when the API loads
```
Go to [Demo & Docs](https://ftgibran.github.io/#/vue-api-request) to further informations.
## Contributing
``` bash
# 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](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
## License
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2017 Felipe Gibran