Vuejs Axios Bridge

Axios plugin with progress bar and autenthication configuration

• Author: Valerio Barbera - [email protected]
• Author Website: www.aventuresrl.com

Dependencies

Plugin ship with NProgress as progress bar module integrated by default.

Install

npm i -S @aventure-cloud/vuejs-axios-bridge

Integrate in your project

You can inject a configuration object with two main properties:

• axios for axios configuration
• progress for NProgress configuration

To discover all passible configuration of this two module read their official documentation.

import AxiosPlugin from '@aventure-cloud/vuejs-axios-bridge';
Vue.use(AxiosPlugin, {
    axios: {
        baseURL: 'api',
        headers: {
            'Authorization': 'Bearer ' + User.api_token
        }
    },
    progress: {
        showSpinner: true
    }
});

Add nprogress style

Import nprogress style in your sass:

@import "../node_modules/@aventure-cloud/vuejs-axios-bridge/assets/nprogress";

Use

export default {
    data(){
        return {
            items: []
        };
    },
    
    mounted(){
        this.$axios.get('items')
            .then(response => {
                this.items = response.data;
            });
    }
    
}

Disable progress bar

If you don't want use a progress bar you can disable it:

import AxiosPlugin from '@aventure-cloud/vuejs-axios-bridge';
Vue.use(AxiosPlugin, {
    axios: {
        ...
    },
    progress: false
})