Skip to content
Interceptor that ties a progressbar to all requests, that it is clear that something is loading
Branch: master
Clone or download
Latest commit 2b309a4 Sep 28, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Add demo Dec 22, 2016
dist Update dist files Sep 28, 2017
src
.gitignore
Gulpfile.js
README.md Add response latency parameter Sep 20, 2016
bower.json Add files Aug 30, 2016
index.js Add files Aug 30, 2016
package.json
webpack.config.js Add demo Dec 22, 2016

README.md

vue-resource-progressbar-interceptor

Module attaches interceptors to vue instance which controls progressbar on top of the screen.

Your vue instance should have this vue-progressbar plugin installed and connected.

Installation

$ npm i vue-resource-progressbar-interceptor

Then in your code:

const Vue = require('vue');
const VueResource = require('vue-resource');
const VueProgressBar = require('vue-progress-bar');
const VueResourceProgressBarInterceptor = require('vue-resource-progressbar-interceptor');

Vue.use(VueResource);
Vue.use(VueProgressBar);
Vue.use(VueResourceProgressBarInterceptor);

Configuration

By default progressbar shows for every single request.

In order not to use progressbar for certain requests, use showProgressBar parameter in request.

Like this:

Vue.http.get('/url', { showProgressBar: false })

Configuration options:

Vue.use(VueResourceProgressBarInterceptor, {
  latencyThreshold: 100, // Number of ms before progressbar starts showing, 100 is default
  responseLatency: 50, // Number of ms before progressbar starts reacting to response, 50 is default
                       // Can be used to wait for more requests to kick in under single progress bar
});

Notes

This plugin was inspired by this angular.js version.

You can’t perform that action at this time.