API: loading プロパティ

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

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

ローディングバーは this.$nuxt.$loading.start() を呼んでローディングバーを開始させたり、this.$nuxt.$loading.finish() を呼んでローディングバーを停止させたりするなど、コンポーネント内でプログラム的に起動することもできます。

ページコンポーネントのマウントプロセス中に、$loading プロパティにすぐにアクセスできない場合があります。これを回避するために mounted メソッドでローダーを起動したい場合は、以下の例のように this.$nextTick 内で $loading メソッドの呼び出しを行うようにしてください。

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

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

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

  • 型: Boolean

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

export default {
  loading: false
}

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

  • 型: Object

他のプロパティの中でも、プログレスバーの色、サイズ、期間、方向は、アプリケーションのニーズに合わせてカスタマイズできます。nuxt.config.jsloading プロパティに関連するプロパティを更新することでカスタマイズできます。

たとえば、高さ 5px の青いプログレスバーを設定するには、nuxt.config.js を次のように更新します。

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

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

キー デフォルト 説明
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 プログレスバーの向きを右から左にします。

プログレスバーの内部

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

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

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

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

continuous loading

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

  • 型: 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'
}

Contributors

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する

Platinum Sponsors

Storyblok
Support Us