ローディング

Nuxt は、遷移中に表示する独自のローディングプログレスバーコンポーネントを提供します。これをカスタマイズしたり、無効にしたり、独自のコンポーネントを作成したりすることができます。

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

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

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

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

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

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

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

export default {
  loading: false
}

デフォルトのローディングプログレスバーを特定のページで無効にすることも可能です。

<template>
  <h1>My page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>

ローディングバーをプログラムで起動する

ローディングバーは 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)
    })
  }
}

プログレスバーの内部

残念ながら、ローディングコンポーネントは新しいページを読み込むのにかかる時間を事前に知ることはできません。したがって、ローディング時間の 100% ちょうどにプログレスバーをアニメーションさせることはできません。

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

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

export default {
  loading: {
    continuous: true
  }
}

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

独自のローディングコンポーネントを使う

Nuxt がデフォルトのプログレスバーコンポーネントの代わりに呼び出す、独自のコンポーネントを作成することができます。そのためには loading オプション内に独自コンポーネントへのパスを指定する必要があります。こうすることで Nuxt は独自コンポーネントを直接呼び出します。

独自コンポーネントはこれらのメソッドを備えている必要があります：

components/LoadingBar.vue に独自のカスタムコンポーネントを作成することができます：

<template>
  <div v-if="loading" class="loading-page">
    <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 に伝えます：

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

loading indicator プロパティ

SPA モードで Nuxt を実行すると、初回のページ読み込み時にはサーバーからのコンテンツがありません。そのためページが読み込まれている間に、空白のページの代わりとして独自の色や背景を加えたりインジケータを変更したりできるスピナーを提供しています。

export default {
  loadingIndicator: {
    name: 'circle',
    color: '#3B8070',
    background: 'white'
  }
}

ビルトインインジケータ

これらのインジケータは、素晴らしい SpinKit プロジェクトからインポートされています。Spinkit のデモページでスピナーを試してみることができます。これらのスピナーを使うために必要なのは、name プロパティに使いたいスピナーの名前を指定することだけです。これらは使うことができるビルトインのインジケータのリストです。

• circle
• cube-grid
• fading-circle
• folding-cube
• chasing-dots
• nuxt
• pulse
• rectangle-bounce
• rotating-plane
• three-bounce
• wandering-cubes

ビルトインインジケータは、color および background オプションをサポートしています。

カスタムインジケータ

もし独自の特別なインジケータが必要な場合は、String 値もしくは Name キーにインジケータのソースコードを HTML テンプレートへのパスとして設定することができます！その際、すべてのオプションもテンプレートへと渡されます。

ベースが必要な場合は、Nuxt のビルトインソースコード を使うこともできます。