Nuxt.jsでLoadingページを設定する

loadingコンポーネントを作る

components/Loading/index.vue

<template lang="pug">
.loading-page(v-if="loading")
  p Loading...
</template>

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

設定ファイルに変更を加える

nuxt.config.js

export default {
  loading: '~/components/Loading/index.vue' // 追記
}

Nuxt.jsのそのほか

• Nuxt.jsを使う