Nuxt.jsのloading indicatorでカスタムコンポーネントを使いたかった

Nuxt.jsのloading indicatorでカスタムプロパティを使いたかった

背景

Nuxt.jsで、ロード中であることを表すアイコンを実装することになったのでNuxt.jsに実装されているloadingプロパティを使うことに。
元々ローディングに使うコンポーネントがvue-loadingを使用して作られており、それにloadingとloading indicatorで合わせたかった。

そもそもloadingとloading indicatorとは

Nuxt.jsに実装されているロード中のアニメーションを流せる優れものです。
デフォルトで実装されており、かつ設定も簡単でカスタマイズも簡単なのでとても重宝しました。

loadingプロパティとloading indicatorプロパティの違い

• loading
  画面遷移時にロード中であることを示す

• loading indicator
  初期表示など、vueコンポーネントがロード中で表示するコンテンツがない状態でロード中であることを示す

なお、デフォルトの状態ではloadingは黒いプログレスバーが表示され、loading indicatorは何も表示されません。

loading・loding indicatorの設定

loadingに関わる設定はnuxt.config.js で設定できます。
以下は例です。

nuxt.config.js

  loading: {
    color: 'red',
    height: '5px',
  },

  loadingIndicator: {
    name: 'circle',
    color: 'red',
    background: 'white',
  },

詳細はこちらから
https://ja.nuxtjs.org/guides/configuration-glossary/configuration-loading-indicator/
https://ja.nuxtjs.org/api/configuration-loading/

困ったこと

前置きが長くなりましたが本題です。上記の例ではloadingは色と高さを指定しており、プログレスバーが表示されています。それを他のコンポーネントで使われているくるくると合わせることになりました。
それがこれ

これはvue-loadingを使って実装されています。

loadingの方は公式ドキュメントのカスタムコンポーネントの項目を参考にして実装し、すんなりといけたのですがloading indicatorのほうで問題発生。

最初に同じようにloading indicatorでvueコンポーネントを指定してみました。

nuxt.config.js

loadingIndicator: '使いたいカスタムコンポーネント',

すると更新した時にエラーが発生

Cannot use import statement outside a module

ぐぐってもいまいち出ない・・・

原因

エラーメッセージを読んだところ、「モジュールの外ではインポートはできないよ」でした

・・・

初期表示など、vueコンポーネントがロード中で表示するコンテンツがない状態でロード中であることを示す

loading indicatorはvueコンポーネントがロードされている最中に表示されるものなので、vueコンポーネントが使えるハズがありませんでした。
その時点では存在しないものを使おうとしていたわけですね。
試しにhtmlファイルを作成して読み込んでみたところうまくいきました。
nuxt.config.jsと同じ階層、componentやassetsなんかに置いても問題なく読み込まれます。

ぐぐる前にちゃんと読まないから・・・

解決策

どうしてもという場合はカスタムコンポーネントをHTMLで実装してloading indicatorに指定することで解決できます。
HTMLを指定する場合はカスタムコンポーネントを指定するのと同じように書けば読み込まれます。

nuxt.config.js

 loadingIndicator: '~/CustomLoading.html',

ただ今回は一から作るほど時間的余裕がないのでNuxt.jsの実装してくれたSpinkitで実装することにしました。vue-loadingを使って実装されている部分もSpinkitを使用するようにしました。
Nuxt.jsではloading indicatorで使えるようにSpinkitをHTMLで実装してくれており、とても簡単に実装できます。
使えるSpinkitの一覧はこちら

nuxt.config.js

loadingIndicator: {
  name: 'chasing-dots',
  color: '#f24e1e',
  background: 'white',
}

vue-loadingの眩しい笑顔が刺さる・・・