Vue API Request provides full control on your APIs, making the calls simple, fast, and easy to implement. Also, your code will be cleaner and more elegant.

Installation

You can install this Package via Npm or Yarn:

$ npm i vue-api-request --save

//OR

$ yarn add vue-api-request

Basic Usage

You have to import the library and use it 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)
Example
<api-request :resource="apiRequest" v-model="apiResponse">
  My stuffs to be shown when the API loads
</api-request>

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. Go to section API - Configuration Options to further information.

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 stuff is to be shown when the API loads
</api-request>

Examples & Explantions

Vue API Request provides full control on your APIs, making the calls simple, fast, and easy to implement. Also, your code will be cleaner and more elegant.

In the first example, we gonna use a public API provided by Giphy which will generate a random Gif every time the component is mounted. Check it out:

<template>
  <api-request :resource="giphyRandom" v-model="myResponse">
    <img v-if="myResponse" :src="myResponse.body.data.image_url"/>
  </api-request>
</template>

<script>
  import Vue from 'vue'
  import VueResource from 'vue-resource'
  import VueApiRequest from 'vue-api-request'
  
  Vue.use(VueResource)
  Vue.use(VueApiRequest)

  export default {
    data () {
      return {
        myResponse: null
      }
    },
    methods: {
      giphyRandom () {
        return Vue.http.get('//api.giphy.com/v1/gifs/random', {
          params: {
            api_key: 'ceea3d73eee446f48e2a645e117b1f31'
          }
        })
      }
    }
  }
</script>

These are the following features & options available in this component.

• Request with Params
• Fake Requests
• Global Request Access from $api
• Trigger & Sync Requests using Waiting Slot
• Conditional Request
• Using Events
• Serial Requests
• Parallel Requests
• Customize

You can see all the details of features & options with code examples on its documentaion. For source code you can visit Github.