nuxt 사이트에 커스텀 프리로더 추가하기

웹사이트의 맞춤형 프리로더가 반드시 지루할 필요는 없습니다. 사용자가 귀하의 웹사이트를 처음 방문할 때 가장 먼저 보게 되는 항목일 것입니다. 따라서 일치하는 디자인으로 귀하의 웹사이트를 확장하는 것이 좋습니다.

나는 최근 TailwindCSS로 내 웹사이트 디자인을 다시 수정했고 사용자 지정 프리로더를 추가하는 아이디어에 도달했습니다. Nuxt는 정말 쉽게 확장하고 사용자 지정할 수 있으므로 쉽게 할 수 있는 방법을 찾았습니다.

사용자 컴포넌트 생성

따라서 nuxt는 단순히 사용자 정의 구성 요소를 프리로더로 설정하도록 허용하고 자동으로 소품을 처리하는 것 같습니다.

원하는 대로 템플릿을 구축하면 됩니다. 내 것은 다음과 같았습니다. (물론 TailwindCSS를 사용하므로 미친 클래스에 신경 쓰지 마십시오)

<template>
  <div class="absolute z-50 w-full h-full overflow-hidden flex justify-center items-center" v-if="loading">
      <div class="h-14 w-14 animate-pulse bg-green-300 rounded-full flex justify-center items-center">
        <svg class="w-12 h-12 text-green-500 animate-spin-slow" stroke="currentColor" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
    </div>
  </div>
</template>

그런 다음 Nuxt가 제공하는 소품이 있는 스크립트를 추가하기만 하면 됩니다.

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

전체 구성 요소는 components/loading/loading.vue 아래의 내 Github repository에서 사용할 수 있습니다.

그것에 대해 그다지 많지 않습니다. 모달로 구성하거나 페이지 어딘가의 구성 요소로 구성할 수 있습니다. 미친 물건을 발명하는 것은 당신에게 달려 있습니다!

컴포넌트를 프리로더로 사용하도록 Nuxt에 지시

구성 요소를 사용하도록 Nuxt를 구성하는 것은 실제로 매우 쉽습니다. 다음과 같이 nuxt.config.js 파일에 설정하면 됩니다.

module.exports {
    loading: '~/components/loader/Loader.vue'
}

저것과 같이 쉬운. 이제 nuxt는 로드할 항목이 있을 때마다 구성 요소를 토글해야 합니다.

Nuxt 기본 프리로더

그래서 이제 내 사이트와 어울리고 멋지게 보이는 멋진 사용자 지정 구성 요소가 생겼습니다. 그래도 나는 그것에 대해 정말로 행복하지 않았습니다. 주된 이유는 말 그대로 무언가가 로드될 때마다 표시되어야 하기 때문입니다. 블로그 게시물을 클릭하거나 페이지를 전환할 때마다 팝업이 표시되었습니다. 그래서 나는 그것이 가치 있다고 생각하는 것보다 더 빨리 나를 짜증나게 했고, 그래서 나는 페이지 중앙에 프리로더라는 개념을 버리고 실제로 사전 설정된 nuxt 프리로더를 사용하여 필요에 맞게 사용자 정의했습니다.

내가 만든 구성 요소는 관심이 있는 경우 Github에 있는 내 저장소에서 계속 사용할 수 있습니다.

따라서 자체 구성 요소에서 보았듯이 nuxt에 프리로더를 사용하도록 지시하기만 하면 됩니다. 기본 Nuxt 프리로더는 다음과 같이 설정할 수 있습니다.

module.exports {
    loading: true
}

광산은 다음과 같이 설정됩니다.

module.exports {
    loading: {
        color: '#6ee7b7',
        height: '4px',
        failedColor: 'b91c1c'
    }
}

그 이상은 아니지만 rtl , css , continuous , duration 등과 같은 더 많은 속성을 변경할 수 있습니다.

Nuxt에는 이에 대한 매우 좋은 문서도 있습니다here.