Comments (12)
A quick way to pass data from router to components is to use Vue.prototype
, from your example you can do:
router.beforeEach((to, from, next)=>{
if (to.name) {
showLoader();
}
// set hideLoader function
Vue.prototype.$hideLoader = hideLoader
next()
})
Component:
mounted () {
this.$hideLoader()
}
from vue-loading-overlay.
Right now i have this code:
main.js
//Form Loading
import Loading from 'vue-loading-overlay';
// Import stylesheet
import 'vue-loading-overlay/dist/vue-loading.min.css';
Vue.use(Loading);
//jQuery
window.$ = require('jquery')
window.JQuery = require('jquery')
// Plugins
import App from './App.vue'
import Chartist from 'chartist'
// router setup
import routes from './routes/routes'
// plugin setup
Vue.use(VueRouter)
Vue.use(DashboardPlugin)
Vue.use(require('vue-moment'));
// configure router
const router = new VueRouter({
routes, // short for routes: routes
linkExactActiveClass: 'nav-item active'
});
//here comes the loader
router.beforeResolve((to, from, next) => {
// If this isn't an initial page load.
if (to.name) {
// Start the route progress bar.
let loader = Loading.show({
});
}
next()
})
router.afterEach((to, from) => {
// Complete the animation of the loader
let loader = Loading.hide()
})
from vue-loading-overlay.
Vue.use(Loading);
// Variable that holds loader instance
let loader = null;
function hideLoader(){
// destroy previous
if(loader) {
loader.hide();
loader = null;
}
}
function showLoader(){
hideLoader();
loader = Vue.$loading.show()
}
router.beforeResolve((to, from, next) => {
// If this isn't an initial page load.
if (to.name) {
showLoader();
}
next()
})
router.afterEach((to, from) => {
// Complete the animation of the loader
hideLoader()
})
Remember
hide()
method is only available on the instance returned byshow()
method.- You can use
$loading
anywhere in your app likeVue.$loading
from vue-loading-overlay.
Hi @ankurk91 , thanks in advance for your help, i'm getting errors with the hideLoader() function:
Syntax Error: Invalid left-hand side in assignment expression
it's about this part:
loader && loader.hide() && loader = null;
from vue-loading-overlay.
loader && loader.hide() && loader = null;
you can simplify this line in your app.
it is checking if an loader exists and if exists the hide it, finally it sets its value to null
from vue-loading-overlay.
but it's throwing the error:
Syntax Error: Invalid left-hand side in assignment expression
any ideas what would be the issue? or is it there another way to do it?
from vue-loading-overlay.
I said you need to simplify this line according to your application. Did you read my comment.
if loader exists {
# hide the loader
# set loader value to null
}
from vue-loading-overlay.
Thanks @ankurk91, that made the trick :)
from vue-loading-overlay.
Hey @ankurk91 and @LaravDev ,
I tried to get this to work and put the whole code in my main.js . Everything is fine.
But the Problem is, the Loader dont get triggered.
And when i put in my App.vue than I get a error.
[Vue warn]: Unknown custom element: <loading> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What is the next step after put in this code in main.js? Im frustrated :/
Console.Logs are showing up, but no spinner.
I think I miss one Step to call the loader itself for my whole application in App.vue
Thank you in advance :)
from vue-loading-overlay.
Can not help you unless you share your code sample.
https://codesandbox.io
from vue-loading-overlay.
Hello I post it here if thats okay. I think its just a small problem with global configuration and triggering the overlay
Main.js
// Import component
import Loading from 'vue-loading-overlay';
// Import stylesheet
import 'vue-loading-overlay/dist/vue-loading.css';
Vue.component('Loading', Loading)
Vue.use(Loading);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App, Loading },
template: '<App/>',
});
let loader = null;
function hideLoader(){
// destroy previous
console.log('2')
if(loader) {
loader.hide();
loader = null;
}
}
function showLoader(){
console.log('1')
hideLoader();
loader = Vue.$loading.show()
}
router.beforeEach((to, from, next)=>{
if (to.name) {
showLoader();
}
next()
})
**router.afterEach((to, from)=>{
setTimeout(() => {
loader.hide()
},1300)
// store.commit('setLoading', false)
})**
I found out what the Problem was.
router.afterEach is triggered too fast, almost instant.
With a delay I can see now the spinner.
But the Problem is that I need this Component to wait until all is loaded before this stops.
Ive found out That I can do the stop of the spinner with the mounted() function.
But my Problem is:
How can I trigger the "loader.hide()" function in my App.vue?
mounted(){
// loader.hide()
console.log('Finished')
},
THANK YOU :)
from vue-loading-overlay.
A quick way to pass data from router to components is to use
Vue.prototype
, from your example you can do:router.beforeEach((to, from, next)=>{ if (to.name) { showLoader(); } // set hideLoader function Vue.prototype.$hideLoader = hideLoader next() })
Component:
mounted () { this.$hideLoader() }
Thank you very much. This works. :)
from vue-loading-overlay.
Related Issues (20)
- Blur (Backdrop-Filter) not working HOT 8
- Vue 3 slot is not showing icon HOT 4
- Question: Do you please have a CDN version for VueJS-2? HOT 1
- How to use global value with Vue3? HOT 1
- useLoading is not consistent with other plugins HOT 1
- Global configuration is not used HOT 1
- In vue3 composition api it gives error TypeError: n.ctx.hide is not a function HOT 4
- vue-loading.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'parentElement') HOT 2
- [vue-2] Why opacity option is not working HOT 4
- Nuxt 3 & vue loading overlay 6 HOT 5
- vue3-loading-overlay error after build and deploy to vps HOT 1
- A plugin must either be a function or an object with an "install" function HOT 4
- (vue 2.5) Loader bar not showing HOT 4
- Doesn't overlay when compiled with laravel-mix in production mode HOT 1
- Show Message below the loading icon HOT 3
- [Nuxt-3] Component is missing template or render function. HOT 8
- `isActive` watcher does not start with initial value when used as a plugin HOT 2
- Cannot read properties of null (reading '_vnode') TypeError: Cannot read properties of null (reading '_vnode') HOT 2
- Cannot read properties of null (reading 'isCE') (Laravel VITE) app HOT 5
- How to use with composition API and Single-File Components? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-loading-overlay.