Menu
I am new to Vue.js, coming from AngularJS 1. Does anybody have tips on how to implement a loading screen such as PleaseWait?
601
Vue. js handles loading components lazily with routes, so on the DOM you can load components only when they are needed through routes. This is done by splitting each route's components into chunks that are separate from the main chunk loaded on initialization.
This type of application is typically referred to as a Single-Page Application (SPA). Vue provides core libraries and comprehensive tooling support with amazing developer experience for building modern SPAs, including: Client-side router. Blazing fast build tool chain.
All we have to do is create a method on our component that uses the name of that lifecycle. If we wanted to call a method right when the component is created, this is how we would do that: export default { created() { console. log('Component has been created!'
I also created an example that integrated with PleaseWait.js
http://codepen.io/CodinCat/pen/ZeKxgK?editors=1010
Since PleaseWait.js manipulates real DOM directly, the code becomes a little bit tricky. I'd recommend to re-implement this library in Vue.js. Vue does have transitions: https://vuejs.org/v2/guide/transitions.html
You can just create a component for it, and use v-if to hide/show it
<loading-screen v-if="isLoading"></loading-screen>
A very simple example: http://codepen.io/CodinCat/pen/MpmVMp
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
