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