Nuxt.jsでページ遷移後に動作するくるくる（ローディングバー）をmixin使って実装する

はじめに

Nuxt.jsでページ遷移後のローディング時に動くくるくるをデフォルトではなく、独自のくるくるを使いたい。また毎回各コンポーネントに独自くるくる起動・終了の定義をするのが面倒くさいのでmixinを使って実装を行う。

実装手順

以下にやることを列挙する。

独自ローディング用コンポーネントを用意する
nuxt.conf.jsのloadingに上記コンポーネントを指定する
mixin用コンポーネントを用意する
ローディングを呼び出したい各コンポーネントでmixinを指定する

ここまでやれば独自くるくるが動くはず。

独自ローディング用コンポーネントを用意する

サンプルとして、ここのloading.vueを使用する。 components/loading.vueを以下のように編集する。

<template>
  <div v-if="loading" class="loading-page">
    <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>

start()とfinish()は定義必須。

nuxt.conf.jsのloadingに上記コンポーネントを指定する

nuxtで動くデフォルトのくるくるに、先程作成したloading.vueを指定する。 nuxt.conf.jsを以下のように編集する。

export default {
  loading: '~/components/loading.vue'
}

mixin用コンポーネントを用意する

以下のようにcomponents/loadingMixin.jsを作成する。拡張子を間違えないように注意。

export default {  
  data() {  
    return {  
      loadingTime: 1000  
    }  
  },  
  async mounted() {  
    this.$nextTick(() => {  
      this.$nuxt.$loading.start();  
      setTimeout(() => this.$nuxt.$loading.finish(), this.loadingTime);  
    })  
  }  
}

これによりmixinを使用するコンポーネントがマウントされたタイミングで独自くるくるが描画される。なおthis.$nuxt.$loading.start()はnuxt.conf.jsで指定した独自くるくるの描画を開始を、this.$nuxt.$loading.finish()は描画の終了を行っている。

ローディングを呼び出したい各コンポーネントでmixinを指定する

以下のようにpages/index.vue, pages/about.vueを作成する。

pages/index.vue

<template>
  <div>
    <p>これはindexです。</p>
    <nuxt-link  to="/about">
      aboutに遷移します。
    </nuxt-link>
  </div>
</template>

<script>
import loadingMixin from '@/components/loadingMixin';

export default {
  mixins: [loadingMixin],
}
</script>

pages/about.vue

<template>
  <div>
    <p>これはaboutページです。</p>
    <nuxt-link  to="/">
      indexに遷移します。
    </nuxt-link>
  </div>
</template>

<script>
import loadingMixin from '@/components/loadingMixin';

export default {
  mixins: [loadingMixin],
}
</script>