You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

loading プロパティ

Nuxt はルート間遷移時にローディングプログレスバーを表示するコンポーネントを用意しています。このコンポーネントをカスタマイズしたり、無効にしたりできます。また、独自のコンポーネントの作成もできます。

  • 型: Boolean または Object または String 
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

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

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

  • 型: Boolean
nuxt.config.js
export default {
  loading: false
}

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

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

プログレスバーをカスタマイズするためのプロパティのリスト。

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

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

  • 型: String

Your component has to expose some of these methods:

メソッド 必須かどうか 説明
start() 必須 ルートが変更されたときに呼び出されます。このときに独自コンポーネントの表示が開始されます
finish() 必須 ルートがロード（及びデータ取得）されたときに呼び出されます。このときに独自コンポーネントが表示が終了します
fail(error) 任意 ルートがロードできなかったときに呼び出されます（例えばデータの取得に失敗したなど）
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
export default {
  loading: '~/components/loading.vue'
}