[NUXT] loading component

페이지를 불러오거나 서버 요청을 보낼 때 대기 시간이 발생한다. 이 때 화면이 정지해있으면 사용자는 페이지가 정지한 것인지 동작중인지 알 수 없다. 로딩 페이지를 표시해 작업이 진행중이라는 것을 표시해줘야한다.

NUXT에서는 간단하게 로딩창을 만들 수 있다. 먼저 로딩을 표시하기 위한 컴포넌트를 작성한다.

// @/components/loading.vue
<template>
  <div v-if="loading">
    <div class="text-white">
      Loading...
    </div>
  </div>
</template>

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

nuxt.config.js을 열고 loading 속성에 작성했던 loading.vue 컴포넌트를 추가한다.

// nuxt.config.js

export default {
    // ...

    loading: '@/components/loading.vue'
}

필요한 부분에서 $nuxt.$loading 을 사용하면 된다.

async clickLogin() {
    this.$nuxt.$loading.start()
    await this.login()
    this.$nuxt.$loading.finish()
},