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 acplish 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?

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 acplish 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?

• javascript
• vue.js

• 4 Why did this get downvoted?... It's an honest question, Vue doesn't have a good way of doing this in it so I need some input on how to best do it... – Simon Hyll Commented May 1, 2017 at 2:59
• 1 I didn't downvote you, but I surmise its because the question sounds like a "give me the code" question. It doesn't indicate what effort you've put into finding a solution. – user47589 Commented May 1, 2017 at 4:41
• Oh, that's not at all what I'm after... I'm more interested in some form of discussion regarding how to best acplish this, I'm quite capable of doing the coding myself... Since no one responded I've started with an almost pure CSS approach and a <div id="splash"> to acplish a splashscreen that I'll later add more functionality to, like load percentage. Just wanted to know if someone had a good suggestion for how to do it. – Simon Hyll Commented May 1, 2017 at 4:49
• 1 The thing is, though, SO isn't a place for starting discussions. See 'Are Stack Exchange sites forums' for more information. – user47589 Commented May 1, 2017 at 4:50
• dude, why did you say "discussion" we want actually code. Not some gibberish prosa. I face the same issue, and the splash screen triggered via jquery does not work for some really odd vue js reason. – Toskan Commented Jan 21, 2019 at 4:49

2 Answers 2

So the splash should live outside of your Vue instance and all that Vue should do is remove the splash once it es 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 ments 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?

Similar to what @Kano was saying;

Just add your "splash content" to the ./public/index.html as follows:

  <div id="app">
    <div 
      style="
        background-image: url('./img/icons/android-chrome-512x512.png');
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute;
        height: 100%; width: 100%
      "
    ></div>
  </div>
  <!-- Built files will be auto injected into `id=app`.
       Any content within will show during the bootstrap
       and will be stripped once the app has fully mounted-->