Nuxt.js는 페이지 전환이나 데이터를 불러오는 동안 로딩 상태를 표시하는 데 도움이 되는 기본 기능을 제공합니다. 로딩 중일 때 사용자에게 시각적인 피드백을 제공하여 사용자 경험을 향상시킬 수 있습니다.

1. 기본 로딩 상태 표시

Nuxt.js에서 기본적으로 제공하는 로딩 상태 표시는 nuxt.config.js 파일에서 설정할 수 있습니다. 아래와 같이 설정할 수 있습니다.

export default {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

이 설정은 페이지가 로딩 중일 때 화면 상단에 파란색으로 높이가 5픽셀로 로딩 바를 표시합니다.

2. 커스텀 로딩 컴포넌트

Nuxt.js에서는 커스텀 로딩 컴포넌트를 만들어 페이지 로딩 상태를 자유롭게 디자인할 수도 있습니다. layouts 폴더 내에 custom-loading.vue와 같이 파일을 만들고 아래와 같이 작성합니다.

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

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  created() {
    this.$nuxt.$on('routeChanged', () => {
      this.loading = true
    })
    this.$nuxt.$on('routeChanged', () => {
      this.loading = false
    })
  }
}
</script>

<style scoped>
.custom-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

이후 nuxt.config.js의 loading 속성을 이 커스텀 로딩 컴포넌트로 설정하면 페이지 로딩 상태를 커스텀할 수 있습니다.

export default {
  loading: '~/layouts/custom-loading.vue'
}

이렇게하여 Nuxt.js를 사용할 때 페이지 로딩 상태를 효율적으로 표시할 수 있습니다.

참고 자료

• Nuxt.js 공식 문서 - 페이지 로딩 상태 커스터마이징

유의: 코드 내에서 custom-loading.vue 파일의 경로는 프로젝트 구조에 따라 실제 경로와 다를 수 있습니다.