How would I create a splash screen in Vue.js?
javascript, vue.js
Solution
So the splash should live outside of your Vue instance and all that Vue should do is remove the splash once it comes alive. Removing is usually handled in your App.vue file's `mounted()` hook.
An enhancement on top of that would be to have a rather static splash and then in your app's `created()` hook add the loader, which gets removed in `mounted()`/`updated()`.
About the non-Vue part of your setup now: in your index.html, the app's wrapper (to which you mount your Vue instance) should contain all the markup for your splash, that way it's automatically removed once App.vue loads up inside of it. Otherwise you'll just have to do manual cleanup.
Your example works fine with the CSS only approach. Addressing the comments for a second: what didn't work out with your go-to solution? Did you run into any trouble or haven't just given it a go yet?
Problem
Basically I want to create a splash screen. It should be displayed for X number of seconds minimum OR the amount of time it takes for the app to load. I'm thinking something like the app logo large in the middle of the screen faded in then out with a black, opaque background. Possibly a loading bar as well that fades in if the time takes more time than the X number of minimum seconds. How would I best accomplish this? Update: just to clarify I'm looking for a discussion of the topic not copy pastable code, I'm quite capable of doing my own code on this matter, just want some input on the best approach to tackle this issue. For example, I'm currently experimenting with a CSS based approach and a div to contain the splashscreen which will, once the app gets far enough, add a loading bar to it and once it's 100% loaded it'll be removed from the DOM. Anyone know of a better approach?