Vuejs Axios Bridge
Axios plugin with progress bar and autenthication configuration
- Author: Valerio Barbera - valerio@aventuresrl.com
- 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
})