vue-nprogress

0.2.0 • Public • Published

nprogress

Slim progress bars is based on nprogress for Ajax'y applications

Installation

$ npm install vue-nprogress --save

Examples

<template>
  <nprogress-container></nprogress-container>
</template>
 
<script>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
 
export default {
  components: {
    NprogressContainer
  }
}
</script>
import Vue from 'vue'
import NProgress from 'vue-nprogress'
import App from './App.vue'
 
Vue.use(NProgress)
 
const nprogress = new NProgress()
 
const app = new Vue({
  nprogress
  ...App
})
 
// APIs: see https://github.com/rstacruz/nprogress
// app.nprogress
// app.nprogress.start()
// app.nprogress.inc(0.2)
// app.nprogress.done()
// Component:
// this.$nprogress

Configuration

const options = {
  latencyThreshold: 200, // Number of ms before progressbar starts showing, default: 100,
  router: true, // Show progressbar when navigating routes, default: true
  http: false // Show progressbar when doing Vue.http, default: true
};
Vue.use(NProgress, options)

In order to overwrite the configuration for certain requests, use showProgressBar parameter in request/route's meta.

Like this:

Vue.http.get('/url', { showProgressBar: false })
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: {
        showProgressBar: false
      }
    }
  ]
})

Badges


fundon.me  ·  GitHub @fundon  ·  Twitter @_fundon

Package Sidebar

Install

npm i vue-nprogress

Weekly Downloads

2,369

Version

0.2.0

License

MIT

Unpacked Size

44.9 kB

Total Files

8

Last publish

Collaborators

  • fundon
  • luventa