vue-bulma / nprogress

Progress bars is based on nprogress for Vue

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

nprogress's Issues

Custom calls support

I inspected the source code and there is two functions used internally initProgress and increase that controls the nprogress's bar.
being initProgress called when you start a requisition and increase when it returns.

My proposal is to export these two functions to be able to call them with custom code.

---

For example, I'm working with Electron's ipc and I need to call initProgress when I send some message and increase when I get the server's response (but the response can't be abstracted like axios or vue-resource).

@fundon I'll probably send a pull request to this, could you merge then?

Not working at all

app.js
import NProgress from 'vue-nprogress'
Vue.use(NProgress)
const nprogress = new NProgress({ parent: '.nprogress-container' })
const app = new Vue({ el: '#app', components: { App, nprogress}, router, });

App.vue
<nprogress-container></nprogress-container>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
export default { name : 'app', components : { NprogressContainer },

[vite] Internal server error: Failed to resolve import "vue-nprogress/src/NprogressContainer" from "src/App.vue". Does the file exist?

This import

import NprogressContainer from 'vue-nprogress/src/NprogressContainer';

does not works with vite but .vue leads to error

[vite] Internal server error: [postcss] ENOENT: no such file or directory, open '~nprogress/nprogress.css'

because of ~ has different convention in webpack and vite from https://stackoverflow.com/a/74154405/6398044

无法使用

Module not found: Error: Can't resolve 'vue-nprogress/src/NprogressContainer'

不知道什么情况。

Passing config when using .vue

Hello, starting from this example

<template>
  <nprogress-container></nprogress-container>
</template>

<script>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'

export default {
  components: {
    NprogressContainer
  }
}
</script>

how can you pass a config?
Specifically I'd like to remove the spinner ({ showSpinner: false })

Set parent does not work!

this.$nprogress.configure({parent: 'div.mu-calendar-container'})

In some of my vue methods, I tried to set the parent container, but it does not work nor give any error info.
Is there anything that I missed?
Thanks

IE Error Object doesn't support property or method 'assign'

Seems it can not work under IE, any idea to fixed this issue?

Safari fatal error

Hi,

The plugin won't work in Safari when you load it in from node modules.
It gives this error: SyntaxError: Use of const in strict mode, so it crashes the entire website.
It should be an easy fix by just changing the const to var.

Keep up the good work!

Wouter

这个控件不能在android下运行吗？

在mac用chrome模拟都ok， 只要到手机就不能用， 发现把这个nprogress去掉就好了。 请问是有什么设置吗？

axios support

Retiring vue-resource
https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.9oiug628f

so, could u support axios on option.http ?

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
};

Error in beforeCreate hook: "SyntaxError: missing ) after argument list"

1. vue init webpack test
2. npm install nprogress
3. edit main.js

import Vue from 'vue'
import NProgress from 'vue-nprogress'
import App from './App.vue'

Vue.use(NProgress)

const nprogress = new NProgress({ parent: '.nprogress-container' })

const app = new Vue({
  nprogress,
  ...App
})
app.$mount('#app')

4. edit App.vue

<template>
  <nprogress-container></nprogress-container>
</template>

<script>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'

export default {
  components: {
    NprogressContainer
  }
}
</script>

5. npm run dev
   works fine

6. console shows:
   vue.esm.js?efeb:578 [Vue warn]: Error in beforeCreate hook: "SyntaxError: missing ) after argument list"
   found in
   ---> at node_modules/vue-nprogress/src/NprogressContainer.vue

ReferenceError: route is not defined

Hi there!

I think some properties missing in the afterEach function: see there

Keep getting cannot find className of null

I've done the setup according to the readme, but every time

Uncaught TypeError: Cannot read property 'className' of null
    at classList (bundle.js:34278)
    at addClass (bundle.js:34245)
    at Object.NProgress.render (bundle.js:34059)
    at Object.NProgress.set (bundle.js:33885)
    at Object.NProgress.inc (bundle.js:33985)
    at Object.NProgress.trickle (bundle.js:33990)
    at bundle.js:33942

Any suggestions?

Can i css for this bar

Can i css for this bar @@
like
<nprogress-container style="background: red; color: red"></nprogress-container>

or

Vue.use(NProgress, {
	latencyThreshold: 200,
	router: true,
	http: false,
        color: red
})

Failed to find '~nprogress/nprogress.css' after use postcss-import

1、vue init webpack test
2、npm install nprogress
3、edit main.js

import NProgress from 'vue-nprogress'

...
...

new Vue({
nprogress: new NProgress({
    parent: '.nprogress-container'
}),

..........

}).$mount('#app')

4、edit App.vue

import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
.....

export default {
    name: 'app',
    components: {
        NprogressContainer
    }
    ....
}

5、npm run dev

ERROR

Module build failed: Error: Failed to find '~nprogress/nprogress.css'

Progress bar not stopping if route is guarded and redirected

How to replicate:

const state = {
  items: [
    {
      name: 'Dashboard',
      path: '/dashboard',
      meta: {
        icon: 'fa-tachometer'
      },
      component: lazyLoading('dashboard', true),
      beforeEnter: (to, from, next) => {
        next('/components')
      }
    },
    charts,
    uifeatures,
    components,
    tables
  ]
}

In store/menu/index.js of vue-admin.

The guard works but progress bar keeps running forever.

Trouble configuring this and getting it working

Hi there,

I've done everything I can to get this to work but I'm not getting anything showing and no errors at all. Do you know of a sample repo where this is being used so I can check my configuration?

Here is what I've done so far:

1. yarn add vue-nprogress

2. added import NprogressContainer from "vue-nprogress/src/NprogressContainer"; into my App.vue, referenced it in components and added the <nprogress-container></nprogress-container> into it.

<template>
  <div id="app">
    <nprogress-container></nprogress-container>
  </div>
</template>

<script>
import NprogressContainer from "vue-nprogress/src/NprogressContainer";

export default {
  name: "app",
  components: {
    NprogressContainer
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style>
</style>

3. imported the library into my main.js and configured as below:

import Vue from "vue";
import NProgress from "vue-nprogress";
import App from "./App.vue";

Vue.use(NProgress);

const nprogress = new NProgress({ parent: ".nprogress-container" });

const app = new Vue({
  el: "#app",
  nprogress,
  components: { App },
  template: "<App />"
});

Anything look bad here? I'm sure it's just something small that I'm doing.

axios may not be defined as Vue.axios (e.g. when using with Laravel)

For anyone using nprogress with Laravel + Vue you may have run into the same issue I did where axios is defined by Laravel as window.axios.

This means that in vue-nprogress/dist/vue-nprogress.js

if (applyOnHttp) {
     var http = Vue.http;
     var axios = Vue.axios;
....

var axios is undefined. To solve this you can simply copy vue-nprogress/dist/vue-nprogress.js to the laravel resources/js folder or wherever you choose, change it to below and then import this in app.js instead of importing it from node-modules.

if (applyOnHttp) {
     var http = Vue.http;
     var axios = window.axios;
....

This got it working perfectly for me.