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.

See example in JSFiddle

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