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