loading プロパティ

• 型: Boolean または Object または String

Nuxt.js はルートから別のルートへ遷移する間、プログレスバーを表示するために自身のコンポーネントを使います。これをカスタマイズしたり、プログレスバーを使わないようにしたり、独自のコンポーネントを作成したりできます。

コンポーネントにおいて、 this.$nuxt.$loading.start() でローディングを開始し、 this.$nuxt.$loading.finish() で終了することができます。

export default {
  mounted () {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
 }

mounted メソッドを利用したい場合、必ず this.$nextTick を利用してください。 $loading がすぐに利用できるとは限らないためです。

プログレスバーを無効にする

• 型: Boolean

ルートから別のルートへ遷移する間にプログレスバーを表示したくないときは nuxt.config.js ファイル内に単に loading: false と記述します:

export default {
  loading: false
}

プログレスバーをカスタマイズする

• 型: Object

プログレスバーをカスタマイズするために使えるプロパティ一覧。

キー	型	デフォルト	説明
color	String	'black'	プログレスバーの CSS カラー
failedColor	String	'red'	ルートをレンダリング中にエラーが発生した場合のプログレスバーの CSS カラー（例えば data または fetch がエラーを返したとき）
height	String	'2px'	プログレスバーの高さ（プログレスバーの style プロパティで使われます）
throttle	Number	200	ミリ秒単位で指定された時間待ったのちにプログレスバーを表示します。 プログレスバーの点滅を防ぐために利用します
duration	Number	5000	プログレスバーを表示する時間の最大値をミリ秒で指定します。Nuxt.js は各ルートが 5秒以内にレンダリングされると想定しています
continuous	Boolean	false	ローディングが duration で指定した時間より長くかかる場合は、プログレスバーのアニメーションを続けさせます。
css	Boolean	true	デフォルトのプログレスバーのスタイルを削除（そして、独自に追加）する場合には false に設定します。
rtl	Boolean	false	プログレスバーの向きを右から左にします。

例として、青いプログレスバーを 5px の高さで表示するには nuxt.config.js を次のように編集します:

export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

独自のコンポーネントを使う

• 型: String

Nuxt.js がデフォルトのコンポーネントの代わりに呼び出す、独自のコンポーネントを作成できます。そのためには loading オプション内に独自コンポーネントのパスを指定する必要があります。そうすれば独自コンポーネントは Nuxt.js により直接呼び出されます。

独自コンポーネントはいくつかのメソッドを備えている必要があります:

メソッド	必須か否か	説明
start()	必須	ルートが変更されたときに呼び出されます。このときに独自コンポーネントの表示が開始されます
finish()	必須	ルートがロード（及びデータ取得）されたときに呼び出されます。このときに独自コンポーネントが表示が終了します
fail()	必須でない	ルートがロードできなかったときに呼び出されます（例えばデータの取得に失敗したなど）
increase(num)	必須でない	ルートのコンポーネントがロードされている間に呼び出されます。num は 100 未満の整数です

components/loading.vue に独自コンポーネントを作ることができます:

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

それから nuxt.config.js を編集して、独自コンポーネントを使うことを Nuxt.js に伝えます:

export default {
  loading: '~/components/loading.vue'
}

プログレスバーの内部

残念ながら、事前にローディングコンポーネントがどのくらいの長さが必要になるのか知ることはできません。例えば、新しいページをロードするのにかかる時間であったり。したがって、プログレスバーをロード時間の100％きっちりにアニメーションをさせることはできません。

Nuxt のローディングコンポーネントは部分的に duration を設定させることでこれを解決します、この値はローディングプロセスにかかる時間の推定値として設定されるべきです。独自のカスタムローディングコンポーネントを使用しない限り、プログレスバーは duration 時間内で常に0％から100％まで移動します（実際の進行にかかわらず）。ローディングが duration で設定された時間より長くかかる場合は、プログレスバーはローディングが完了するまで100％の位置に留まります。

continuous を true に設定することでこのデフォルトの振る舞いを変更することができます、そして100％に達した後にプログレスバーは再び duration で設定した時間で0％に縮小し始めます。0％に達してもまだローディングが完了していない場合は、再び0％から100％に向けて増え始めます。ローディングが完了するまでこれを繰り返します。

continuous を設定したプログレスバーの例: