Awesome
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
