https://github.com/imcvampire/vue-resource-nprogress
An interceptor that adds progressbar to all requests
https://github.com/imcvampire/vue-resource-nprogress
hackertoberfest
Last synced: 7 months ago
JSON representation
An interceptor that adds progressbar to all requests
- Host: GitHub
- URL: https://github.com/imcvampire/vue-resource-nprogress
- Owner: imcvampire
- Created: 2016-09-11T03:42:30.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-07T02:38:01.000Z (over 8 years ago)
- Last Synced: 2025-03-27T21:39:07.469Z (8 months ago)
- Topics: hackertoberfest
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-refactor - vue-resource-nprogress
- awesome-vuejs - vue-resource-nprogress - A progressbar interceptors for vue-resource using `NProgress` by [@imcvampire](https://github.com/imcvampire) (Awesome Vue.js / Libraries & Plugins)
README
# vue-resource-nprogress
This is a fork of [vue-resource-progressbar-interceptor](https://github.com/staskjs/vue-resource-progressbar-interceptor) but instead of using [vue-progressbar](https://github.com/hilongjw/vue-progressbar), this plugin uses [nprogress](https://github.com/rstacruz/nprogress)
Module attaches interceptors to vue instance which controls progressbar on top of the screen.
## Installation
$ npm i vue-resource-nprogress
Then in your code:
const Vue = require('vue');
const VueResource = require('vue-resource');
const VueResourceNProgress = require('vue-resource-nprogress');
Vue.use(VueResource);
Vue.use(VueResourceNProgress);
NOTE: You should have `NProgress` installed globally.
A example of this is adding `nprogress` plugin in `` in `<head>`
### Using CommonJS
```
npm i nprogress
import NProgress from 'nprogress'
window.NProgress = NProgress
require('nprogress/nprogress.css')
```
## 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
});
## Notes
This plugin was inspired by [this angular.js version](https://github.com/chieffancypants/angular-loading-bar).