How to make a loading screen in Vue?

Question

Vue.js

Greetings.
I'm doing a test project to feel vue. There are the following steps:
1) An html page is loaded with the #app element
2) Scripts are loaded with defer
3) The root component, router, etc. is mounted in the scripts.
4) The first page component connects to the server 5
) The server reports that the connection is ready
6) The application is ready to work
server. And I have 2 questions. What is the best way to implement this in a view application? And how can I make
this screen show immediately after step 1 without waiting for all vue components to load?

Answer 1

<div id="app">
</div>

#app[v-cloak] {
  width: 100%;
  height: 100vh;
  background: url('loader.gif') no-repeat center;
}

CSS placed directly in the page, in the head section