tahq69 / vue-loading

Loading bar for Vue.js apps using axios

crip-vue-loading

A Vue.js project to wrap axios and display global loading bar of http requests. For more details read documentation with examples

Usage

Install

> npm i -S crip-vue-loading

Setup

import Vue from "vue"
import CripLoading from "crip-vue-loading"
import axios from "axios"

// Install component in to Vue instance and inject in to axios.
Vue.use(CripLoading, {axios})

// If you use "vue-router" and do not disable `applyOnRouter` option
// make sure you install plugin before router:
// https://github.com/vuejs/vue-router/issues/315

Display loading bar

// App.vue
<template>
  <div class="container">

    <div class="row">
      <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2">
        <button class="btn btn-primary" @click="save($event, 2)">Save</button>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  
  export default {
    methods: {
      async save (e, timeout = 0) {
        try {
          // simply call axios to save or request data and loading bar will
          // show up while response is not received from server.
          await axios.get(`http://www.fakeresponse.com/api/?sleep=${timeout}`)
        } catch (err) {
          console.error(err)
        }
      },
    },
  }
</script>

TODO:

• Add algorithm with exponential progression instead of current linear;

Build Setup

# install dependencies and serve with hot reload at localhost:8080
> npm i && npm run dev

Release steps

> npm run release