JSPM

vue-resource-nprogress

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q44946F
  • License ISC

Interceptor that ties a progressbar to all requests, that it is clear that something is loading

Package Exports

  • vue-resource-nprogress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-resource-nprogress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-resource-nprogress

This is a fork of vue-resource-progressbar-interceptor but instead of using vue-progressbar, this plugin uses 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 <script> 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.