Vueの規模が大きくなってくると、Vueのロードが完了するまでの間、{{ xxxx }}のようなタグが目立ってくるようになります。
Vueのコンポーネントを使えばうまく回避できるのかもしれませんが、Vueインスタンスと双方向データバインディングだけで満足している私にとっては、少々悩ましいです。
そこで、VueやJavascriptに頼らず、CSSだけでVueのロード前の画面をかぶせるローディング中画面を作ろうかなあと思います。

実際のローディング画面を見たい場合は、以下のWebページを開くと、一瞬だけローディング画面が見れます。

Webページ
　https://poruruba.github.io/utilities/

（参考）GitHub
　https://github.com/poruruba/utilities

やってること

Flexパネルを画面全体で覆って、CSSアニメーションを表示させ、Vueのロードが完了したら、Flexパネルをフェードアウトさせる、です。

画面全体を覆うFlexパネルの定義
ロード完了したらフェードアウトさせる処理
フェードアウトを開始する処理
ロード中のアニメーションのひな型を選ぶ
HTMLにロード中アニメーションのエレメントを挿入する
Javascriptにフェードアウト開始の呼び出しを追加する

画面全体を覆うFlexパネルの定義

CSSで以下のように表現します。

public/css/start.css

#loader-background {
  background: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  display: flex;
  top: 0px;
  left: 0px;
  z-index: 9999;
  --sk-color: #00ced1;
}

heightとwidthを100%にしてます。
※--sk-colorは後で説明します。

ロード完了したらフェードアウトさせる処理

CSSで以下のように表現します。

public/css/start.css

.loader-loaded {
  animation: fadeout-anim 1s linear forwards;
}

@keyframes fadeout-anim {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

上記にて、CSSアニメーションを使って1秒かけて透明およびhiddenにしてます。

フェードアウトを開始する処理

前のCSSで、loader-loadedのクラスがついていれば、フェードアウトのアニメーションが開始されるようにしました。
なので、Vueのロードが完了したタイミングで、Javascriptから以下を呼び出せばよいです。

public/js/vue_utils.js

function loader_loaded(){
  const element = document.getElementById("loader-background");
  if( element )
    element.classList.add('loader-loaded');
}

ロード中のアニメーションのひな型を選ぶ

こちらのCSSが単純そうだったので採用しました。

tobiasahlin/SpinKit

デモページもありますので、どんなアニメーションか確認できます。

CDNにも登録されているのですぐに使えます。

public/index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/2.0.1/spinkit.min.css" />

例えば、以下のようなHTMLを追加すればよいようです。

<div class="sk-chase">
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
</div>

HTMLにロード中アニメーションのエレメントを挿入する

<html> の <body> の先頭あたりに以下を追加します。
上記のアニメーションを使う場合

public/index.html

<div id="loader-background">
  <div class="sk-chase sk-center">
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
  </div>
</div>

要するに、idが「loader-background」をもったdivエレメントの中にさきほどのアニメーションの定義を記載するということです。
そのとき、classに「sk-center」を付けてあげます。そうすると、アニメーションが画面中央で動いてくれるようになります。
また、FlexパネルのCSS指定のところで「--sk-color: #00ced1;」というCSS変数を追加していました。これは、SpinKitのアニメーションの色の指定です。お好みで色を変えてください。

Javascriptにフェードアウト開始の呼び出しを追加する

Vueでのロード完了として、mountedに以下を追加しましょう。

public/js/start.js

    mounted: function(){
      // ・・・
      loader_loaded(); // ★これ
    }

単純にローディング中に画面全体を非表示にするだけれあれば

Vueでv-cloakという機能があります。ローディング中はこの値が有効ですが、ローディングが完了すると無効となります。
そこで、以下をCSSで指定します。

public/css/start.css

[v-cloak] {
  display: none;
}

そして、ローディング中は非表示にしたい部分に以下のようにv-cloakを付けます。

    <div id="top" class="container" v-cloak>

おわり

私は、上記をすでに埋め込み済みの以下のテンプレートをいつも使ってます。

poruruba/express_template

以上

Vueのタグが見えないようにローディング画面を付ける

やってること

画面全体を覆うFlexパネルの定義

ロード完了したらフェードアウトさせる処理

フェードアウトを開始する処理

ロード中のアニメーションのひな型を選ぶ

HTMLにロード中アニメーションのエレメントを挿入する

Javascriptにフェードアウト開始の呼び出しを追加する

単純にローディング中に画面全体を非表示にするだけれあれば

おわり