くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt3 > SPAなNuxt3で初期読み込み時のローディングを表示する

SPAなNuxt3で初期読み込み時のローディングを表示する

Nuxt3

Nuxt3でSPA(ssr: false)時に真っ白な画面が表示されるけれど、
Nuxt2みたいにローディングを表示したいなといろいろ調べたときの備忘録(*´ω｀*)

Nuxt3.6以降で対応されたっぽい。

Nuxt2時代

Nuxt2ではnuxt.config.tsに、
loadingIndicator指定すればOKだったやつ

SpinKitにあるものを選択できた。

import { NuxtConfig } from "@nuxt/types";

const config: NuxtConfig = {
  ssr: false,
  target: "static",
  loadingIndicator: {
    name: 'circle',
    color: '#3B8070',
    background: 'white'
  }
}

Nuxt3版

Nuxt3にはまだ無いようで、ローディング画面を自前で用意する必要がある。

export default defineNuxtConfig({
  ssr: false,
  // これを指定
  spaLoadingTemplate: "./spa-loading-template.html",
  // trueを指定するとNuxtのアイコンが使われる
  spaLoadingTemplate: true,
});

初期描画時はVue自体もまだ読み込まれていないので、
HTMLを用意する必要がある。

SpinKitや Single Element CSS Spinnersなどを参考に、
HTMLで用意してみた。

<!-- ./spa-loading-template.html -->
<div class="loader"></div>
<style>
  :root {
    --loading-color: #cb9ed9;
    --loading-sub-color: #ffffff;
    --loading-size: 80px;
    --loading-border-width: 6px;
    --loading-speed: 1.5s;
  }
  .loader {
    position: fixed;
    top: calc(50% - var(--loading-size) / 2);
    left: calc(50% - var(--loading-size) / 2);
    z-index: 1031;
    width: var(--loading-size);
    height: var(--loading-size);
    box-sizing: border-box;
    border: solid var(--loading-border-width) transparent;
    border-top-color: var(--loading-color);
    border-left-color: var(--loading-color);
    border-bottom-color: var(--loading-color);
    border-right-color: var(--loading-sub-color);
    border-radius: 50%;
    -webkit-animation: loading var(--loading-speed) linear infinite;
    animation: loading var(--loading-speed) linear infinite;
  }

  @-webkit-keyframes loading {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
</style>

これで表示されるようになる

index.htmlの変化

spaLoadingTemplateのあり/なしでの、
nuxi generateしたときに出力される、
.output/public/index.htmlの違いはこんな感じ。

  <body>
    <div id="__nuxt">
+     <!-- ./spa-loading-template.htmlの中身 -->
+     <div class="loader"></div>
+     <style>
+       /* 略 */
+     </style>
+     <!-- ./spa-loading-template.htmlの中身 -->
    </div>
    <script type="application/json" id="__NUXT_DATA__" data-ssr="false">
      /* 略 */<
    </script>
    <script>/* 略 */</script>
  </body>

ファイルの中身がそのまま差し込まれるので、<html>などは不要。

ファイルの読み込みが完了すると、
<div id="__nuxt">配下が差し替わるので、
ローディングが表示されなくなる感じ。

以上!! ちょっと手間だけどいつの間にかできるようなってた(*´ω｀*)

参考にしたサイト様