Nuxt.jsでローディングアニメーションを設定する方法

Nuxt.jsでページ読み込み時などに独自のローディングアニメーションを設定する方法です。

Loadingコンポーネントを作成する

まずは、ローディング時にアニメーションさせたいコンポーネントを作成します。

Loading.vue

<template>
  <div v-if="loading" class="loading">
    <div class="loading__loader">Loading...</div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "Loading",
  data() {
    return {
      loading: false
    };
  },
  methods: {
    start() {
      this.loading = true;
    },
    finish() {
      this.loading = false;
    }
  }
});
</script>

<style lang="scss" scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  transition: all 1.2s ease;
  background: rgba(255, 255, 255, 0.5);
  &__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
  }
}
</style>

start()ルートが変更されたときに呼び出されるメソッド。
finish()ルートがロード（及びデータ取得）されたときに呼び出されるメソッド。
上記の2つは必ず設定する必要があります。

他にも任意のメソッドでfail(error)、increase(num)があり、ロードができない時の処理もおこなえます。

nuxt.config.jsでローディングコンポーネントを読み込む

nuxt.config.js

module.exports = {
 loading: '~/components/Loading.vue',
}

nuxt.config.jsで作成したローディングコンポーネントを読み込むことで、独自で作ったコンポーネントをローディングアニメーションとして設定できます。