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で編集する
更新日 Thu, Dec 18, 2025