Awesome Open Source
Awesome Open Source

Vue API Request

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

Installation

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/[email protected]/dist/vue-api-request.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/vue-api-request.min.css" rel="stylesheet"/>

It will set window.VueApiRequest as the module.

See example in JSFiddle

Basic Usage

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)

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.

Example

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.

Contributing

# 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.

License

MIT Copyright (c) 2017 Felipe Gibran


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,145
api (1,622
vuejs (1,070
component (539
axios (238
loader (160
ajax (103
request (80
vue-resource (25

Find Open Source By Browsing 7,000 Topics Across 59 Categories