【Nuxt3.6.5】Nuxt3でSPAのデフォルトのローディング画面を自作ページに変えたい
やりたいこと
HTMLやJSの取得、middlewareの実行中にNuxt3のデフォルトのローディング画面がでます。
This is what I mentioned. pic.twitter.com/VtcOC595nl
— さっちゃん (@toshiakisan1127) 2023年7月22日
個人開発だとこれはこれでかっこいいのですが、業務で使うとなるとNuxtで書かれていることがあまりにも分かりすぎますし、ユーザーには必要のない情報です。せっかく自分たちのコンポーネントでアプリケーションの統一感を出していても、このロード画面が出ることで統一感が損なわれUXが落ちる可能性があります。そこで、このロード画面を自作のページにしたいです。
結論
Nuxt3は ~/app/spa-loading-template.htmlを取ってきて表示しているだけなので、~/appディレクトリを作成し、そこにspa-loading-template.htmlを作成すればokです。
デフォルトのNuxtのロード画面から、自作のHTMLを表示させることができた。（動画のSecretページを押した後のspinner）
— さっちゃん (@toshiakisan1127) 2023年7月22日
ロード時には ~/app/spa-loading-template.htmlを見るので、そこに自分のHTMLファイルをおけば好きにリソース取得時のロード画面を表示できる。
c.f. https://t.co/Zgx52eDLdf） pic.twitter.com/yQEHiyvk6g
