How to implement a loading screen for a SPA written in Vue.js?

Question

I am new to Vue.js, coming from AngularJS 1. Does anybody have tips on how to implement a loading screen such as PleaseWait?

Answer 1

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://v2.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