vue-bulma / nprogress

Progress bars is based on nprogress for Vue

vue-bulma

A modern UI framework based on Vue and Bulma.

Install

Install with npm:

$ npm i vue-bulma --save

Install with yarn:

$ yarn add vue-bulma

Example

import Vue from 'vue'
import * as components from 'vue-bulma'

// In the global registration
for (const [key, value] of Object.entries(components)) {
  const name = value.name || `vb-${key.toLowerCase()}`
  Vue.component(name, value)
}

Development

We use Lerna to manage multiple packages.

$ npm i lerna --global 

$ yarn bootstrap

Open Examples

$ yarn dev

Format packages

$ yarn run format

Create a package

# vue-bulma-container
$ lerna create vue-bulma-container
$ lerna add vue packages/vue-bulma-container/
$ lerna add bulma packages/vue-bulma-container/
$ cd packages/vue-bulma-container/
$ mkdir src
$ touch src/main.js
$ touch src/style.scss

Add to vue-bulma

$ lerna add vue-bulma-container packages/vue-bulma/

Team

Lead Maintainers

• fundon, https://twitter.com/_fundon, https://www.npmjs.com/~fundon

Collaborators

• fundon, https://twitter.com/_fundon, https://www.npmjs.com/~fundon

License

Licensed under MIT.

nprogress's Issues

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

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

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?

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.

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.

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.

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?

无法使用

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

不知道什么情况。

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

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

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

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

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

这个控件不能在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
};

[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

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'

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