vue2-http

Vue2Http

Vue Http Component for Vue 2.x

Makes it easy to make HTTP requests, auto-populate objects (via v-model), show progress bar (Nprogress or Bootstrap progress bar) automatically!

Install

    npm install vue2-http --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Http from 'vue2-http';

2.1 Use it globally

Vue.use(Vue2Http);

// OR with options

Vue.use(Vue2Http, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-http ref="http" v-model="data" :error-fn="onError"></vue2-http>
</template>

components: {
    'vue2-http': Vue2Http
},

//1. automatically show progress bar 
//2. populate "this.data" with request results!
//3. show an error popup on error (error-fn) on error 

this.$refs.http.request(data = null, url = '', method = null, options = {})

Properties

• url: String

• method: String (default: GET)

• data: Object

• value: any

• height: any (default: 18)

• showError: Boolean

• showSuccess: String

• showLoading: Boolean

• loadingLabel: String (default: Loading...)

• dataKey: String

• cache: Boolean

• debounce: Number

• xDebug: Boolean

• autoLoad: Boolean

• recaptcha: Boolean

• recaptchaKeys: Object

Example

<template>
    <div id="app" style="text-align: center">
        <div>
            <button @click="get">GET</button>
            <button @click="post">POST</button>
            <button @click="dataKey">dataKey</button>
            <button @click="cache">Cached</button>
            <button @click="debounce">Debounced</button>
            <button @click="json">JSON</button>

            <vue2-http ref="http" v-model="data" :error-fn="onError" :x-debug="true"></vue2-http>

            <vue2-http ref="dataKey" v-model="data" :error-fn="onError" data-key="id"></vue2-http>

            <vue2-http ref="cached" v-model="data" :cache="true"></vue2-http>

            <vue2-http ref="debounce" v-model="data" :debounce="2000"></vue2-http>

            <vue2-http v-model="auto" method="post" url="posts" :data="{body: 'test'}" :auto-load="true"></vue2-http>

            <pre>{{data}}</pre>

            <hr>

            <pre>auto: {{auto}}</pre>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2Http from '../src/index'

    Vue.use(Vue2Http, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

    export default {
        name: 'app',
        data() {
            return {
                data: {},
                auto: {},
            }
        },
        methods: {
            onError(e) {
                console.log("e: ", e);
            },
            get() {
                this.$refs.http.request({postId: 1}, 'comments', 'get').then((result) => console.log("result: ", result));
            },
            post() {
                this.$refs.http.request({body: '123'}, 'posts', 'post').then((result) => console.log("result: ", result));
            },
            dataKey() {
                this.$refs.dataKey.request({body: '123'}, 'posts', 'post').then((result) => console.log("result: ", result));
            },
            cache() {
                this.data = {};
                this.$refs.cached.request({postId: 1}, 'comments', 'get').then((result) => console.log("result: ", result)).catch((e) => console.error(e));
            },
            debounce() {
                this.data = {};
                this.$refs.debounce.request({postId: 1}, 'comments', 'get').then((result) => console.log("result: ", result));
                this.$refs.debounce.request({postId: 1}, 'comments', 'get').then((result) => console.log("result: ", result));
            },
            json() {
                this.$refs.http.request(null, 'test.json', 'get', {baseURL: '/'}).then((result) => console.log("result: ", result));
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build