https://github.com/vue-bulma/nprogress
Progress bars is based on nprogress for Vue
https://github.com/vue-bulma/nprogress
Last synced: 7 months ago
JSON representation
Progress bars is based on nprogress for Vue
- Host: GitHub
- URL: https://github.com/vue-bulma/nprogress
- Owner: vue-bulma
- License: mit
- Created: 2016-09-02T06:24:21.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-05-08T06:12:43.000Z (over 4 years ago)
- Last Synced: 2024-04-14T00:47:29.281Z (over 1 year ago)
- Language: JavaScript
- Size: 67.4 KB
- Stars: 185
- Watchers: 2
- Forks: 31
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-nprogress - Progress bars is based on nprogress for Vue. (Components & Libraries / UI Components)
- awesome-vue-refactor - vue-nprogress
- awesome-vue-zh - vue-nprogress - 进度条基于Vue的nprogress. (UI组件 / 装载机)
- awesome-vuejs - vue-nprogress - NProgress component is based on [nprogress](https://github.com/rstacruz/nprogress) for Vue, by [@fundon](https://github.com/fundon) (Awesome Vue.js / Libraries & Plugins)
- awesome-vue - vue-nprogress - Progress bars is based on nprogress for Vue. (UI Components / Loader)
README
# nprogress
Slim progress bars is based on [nprogress](https://github.com/rstacruz/nprogress) for Ajax'y applications
## Installation
```console
$ npm install vue-nprogress --save
```
## Examples
```vue
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
export default {
components: {
NprogressContainer
}
}
```
```js
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
```js
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:
```js
Vue.http.get('/url', { showProgressBar: false })
```
```js
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
meta: {
showProgressBar: false
}
}
]
})
```
## Badges
---
> [fundon.me](https://fundon.me) ·
> GitHub [@fundon](https://github.com/fundon) ·
> Twitter [@_fundon](https://twitter.com/_fundon)