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で編集する
更新日 Wed, Jul 24, 2024
![Sébastien Chopin](/_nuxt/image/e847b9.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/d0b78e.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)