Nuxt.js의 loading indicator에서 사용자 정의 속성을 사용하고 싶었습니다.

배경

Nuxt.js에서 로드 중임을 나타내는 아이콘을 구현하게 되었으므로 Nuxt.js에 구현된 loading 속성을 사용하게 됩니다.
원래 로딩에 사용하는 컴포넌트가 vue-loading을 사용하여 만들어졌으며, 거기에 loading과 loading indicator로 맞추고 싶었다.

원래 loading과 loading indicator란

Nuxt.js에 구현된 로드 중에 애니메이션을 흘릴 수 있는 뛰어난 것입니다.
기본적으로 구현되어 있으며 설정도 간단하고 사용자 정의도 간단하기 때문에 매우 편리했습니다.

loading 속성과 loading indicator 속성의 차이

로딩
화면 전환 중에로드 중임을 나타냅니다

loading indicator
초기 보기와 같은 vue 구성 요소가 로드 중 표시할 콘텐츠가 없는 상태에서 로드 중임을 나타냅니다

또한 기본 상태에서 loading은 검은색 진행 표시줄이 표시되고 loading indicator는 아무 것도 표시되지 않습니다.

loading · loding indicator 설정

로딩과 관련된 설정은 nuxt.config.js에서 설정할 수 있습니다.
다음은 예입니다.

nuxt.config.js

  loading: {
    color: 'red',
    height: '5px',
  },

  loadingIndicator: {
    name: 'circle',
    color: 'red',
    background: 'white',
  },

자세한 것은 이쪽으로부터
htps : // 그럼. 없는 xtjs. rg / 구이 s / 곤후 글라치 온 - g ぉ さ ry / 곤후 글라치 온 - ぉ 아 ぢ g
htps : // 그럼. 없는 xtjs. 오 rg / 아피 / 곤후 글라치 온 ぉ 아오 g /

어려움

전치가 길어졌지만 본제입니다. 위의 예에서 loading은 색상과 높이를 지정하며 진행률 표시줄이 표시됩니다. 그것을 다른 컴포넌트에서 사용되고 있는 빙글빙글 합치게 되었습니다.
그것이 이것


이것은 vue-loading 을 사용해 구현되고 있습니다.

loading 쪽은 공식 문서의 커스텀 컴퍼넌트의 항목을 참고로 해 구현해, 순조롭게 했습니다만 loading indicator 쪽으로 문제 발생.

먼저 같은 방식으로 loading indicator에서 vue 구성 요소를 지정해 보았습니다.

nuxt.config.js

loadingIndicator: '使いたいカスタムコンポーネント',

그러면 업데이트 할 때 오류가 발생합니다.

Cannot use import statement outside a module

빠져도 지금은 나오지 않는다・・・

원인

오류 메시지를 읽은 후 "모듈 외부에서는 가져올 수 없습니다."

···

초기 표시와 같이 vu 컴퍼넌트가 로드중으로 표시하는 컨텐츠가 없는 상태로 로드중임을 나타낸다

로딩 인디케이터는 vue 컴포넌트가 로드되는 동안에 표시되는 것이므로, vue 컴포넌트를 사용할 수 있는 하즈가 없었습니다.
그 시점에서는 존재하지 않는 것을 사용하려고 했던 것이군요.
시도에 html 파일을 만들고 읽어 보니 잘 작동했습니다.
nuxt.config.js와 같은 계층, component나 assets 등에 넣어도 문제없이 로드됩니다.

빙글빙글 전에 제대로 읽지 않으니까・・・

해결책

아무래도 하는 경우는 커스텀 컴퍼넌트를 HTML로 구현해 loading indicator에 지정하는 것으로 해결할 수 있습니다.
HTML을 지정하는 경우는 커스텀 컴퍼넌트를 지정하는 것과 같이 쓰면 로드됩니다.

nuxt.config.js

 loadingIndicator: '~/CustomLoading.html',

단지 이번에는 처음부터 만들 정도로 시간적 여유가 없기 때문에 Nuxt.js의 구현해준 Spinkit로 구현하기로 했습니다. vue-loading을 사용하여 구현되는 부분도 Spinkit을 사용합니다.
Nuxt.js는 loading indicator에서 사용할 수 있도록 Spinkit을 HTML로 구현했습니다. 매우 간단하게 구현할 수 있습니다.
사용 가능한 Spinkit 목록은 여기

nuxt.config.js

loadingIndicator: {
  name: 'chasing-dots',
  color: '#f24e1e',
  background: 'white',
}

vue-loading의 눈부신 미소가 찔린다・・・