vue-bulma / nprogress Goto Github PK
View Code? Open in Web Editor NEWProgress bars is based on nprogress for Vue
License: MIT License
Progress bars is based on nprogress for Vue
License: MIT License
在mac用chrome模拟都ok, 只要到手机就不能用, 发现把这个nprogress去掉就好了。 请问是有什么设置吗?
Hi there!
I think some properties missing in the afterEach function: see there
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 }
)
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
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
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'
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
})
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.
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:
yarn add vue-nprogress
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>
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.
Module not found: Error: Can't resolve 'vue-nprogress/src/NprogressContainer'
不知道什么情况。
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 },
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.
Seems it can not work under IE, any idea to fixed this issue?
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
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?
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
};
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?
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')
<template>
<nprogress-container></nprogress-container>
</template>
<script>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
export default {
components: {
NprogressContainer
}
}
</script>
npm run dev
works fine
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.