Nuxt3系でSplashScreenを表示する

DEMO

スプラッシュスクリーンとは？

スプラッシュスクリーンは、アプリケーションがロードされている間に表示される一時的な画面です。
web サイトの index page を表示する前に設置することでリッチに見せることができます。

実装

1.スプラッシュスクリーンコンポーネントの作成

最初に、スプラッシュスクリーンの component を作成します。
（index page に直書きでも良いです。）

以下の例では、シンプルなメッセージを中央に配置しています。

Loading.vue

<script lang="ts" setup></script>

<template>
  <article class="fadeout">
    <section class="full-container">
      <div>Hello Splash Screen!!</div>
    </section>
  </article>
</template>

<style scoped>
/* レイアウト調整 */
.full-container {
  width: 100%;
  height: 100vh;
  background-color: black;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* アニメーション お好みで*/
.fadeout {
  animation: fadeout 2s forwards;
  animation-delay: 1s;
}

@keyframes fadeout {
  to {
    opacity: 0;
    scale: 5;
    visibility: hidden;
  }
}
</style>

2.スプラッシュスクリーンの表示と非表示の制御

default.vue にて、作成した component を読み込みます。
onMounted を使用して、アプリケーションのロード時にスプラッシュスクリーンを表示し flag で表示を管理します。
下記は秒数固定でスプラッシュスクリーンを表示しています。

default.vue

<script lang="ts" setup>
import { onMounted } from "vue";
import Loading from "../components/atoms/Loading.vue";

const isLoading = ref(true);

onMounted(() => {
  setTimeout(() => {
    isLoading.value = false;
  }, 3000);
});
</script>

<template>
  <div>
    <LoadingScreen v-if="isLoading" />
    <div class="min-height-container" v-if="!isLoading">
      <main>
        <slot />
      </main>
    </div>
  </div>
</template>

<style scoped>
/* レイアウト調整 */
.min-height-container {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}
</style>

下記は読み込み完了時に表示する例です。

onMounted(async () => {
  // アプリケーションの初期化処理
  // 例: await fetchData();
  isLoading.value = false;
});

まとめ

以前使用した際の備忘録でまとめました。
web サイトをリッチに見せたり、読み込みに時間がかかる場合に使用する際の参考になれば幸いです。