Nuxt 3 がリリースされました！ https://nuxt.com/v3 で詳細について見れます。
翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

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'
}
このページをGitHubで編集する 更新日 Tue, Dec 6, 2022
Clément Ollivier Clément Ollivier Daniel Roe Daniel Roe Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Sébastien Chopin Sébastien Chopin Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss Xanzhu Xanzhu bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Lucas Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Ashimine Ikko Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti Marcello Bachechi Marcello Bachechi Rodolphe Rodolphe Thomas Underwood Thomas Underwood Shek Evgeniy Shek Evgeniy Lukasz Formela Lukasz Formela Hugo Torzuoli Hugo Torzuoli