概要

NuxtJSベースのサイトで、画面遷移やAPI呼び出し時などのローディング時の表示ができるようにしました。

loading プロパティ - NuxtJSを参考にしています。

実装内容

コンポーネント

• ローディング中は全画面で半透明のグレーのオーバーレイを表示するようにしました
• cssはTailwind CSSのclassを使っていますが、cssをベタで書いても問題ありません
• /components/Loading.vue を作成します
• transition で囲んでアニメーションを追加しても良いかもしれません。

<template>
  <div v-if="loading" class="fixed inset-0 bg-black bg-opacity-25 z-50"></div>
</template>

<script>
export default {
  data: () => ({
    loading: false,
  }),
  methods: {
    start() {
      this.loading = true
    },
    finish() {
      this.loading = false
    },
  },
}
</script>

設定

• nuxt.conig.js

  loading: '~/components/Loading.vue',  // この行を追加します

APIの時のローディング制御

• this.$nuxt.$loading.start() をAPI call前に呼びます。
• this.$nuxt.$loading.finish() をAPI call後に呼びます。

<template>
  <div>
    <button @click="submit">Submit</button>
  </div>
</template>

<script>
export default {
  methods: {
    async submit() {
      this.$nuxt.$loading.start()
      try {
        // apiなどを呼ぶ処理
        // await this.$store.dispatch('your/submit/action')
      } finally {
        this.$nuxt.$loading.finish()
      }
    },
  }
}
</script>

以上になります。便利でした。