소개

제목대로 Nuxt.js에 vuejs-datepicker를 도입하기까지 예상보다 시간이 걸렸기 때문에 메모.

vuejs-datepicker 소개

여기 의 기사를 참고로 진행해 갔습니다.

설치

$ npm i -D vuejs-datepicker

컴포넌트 생성

plugins/vuejs-datepicker.js

import Vue from 'vue'
import DatePicker from 'vuejs-datepicker'

Vue.component('DatePicker', DatePicker)

여기서 넘어지는 포인트.
자신은 typescript를 사용하고 있었으므로, vuejs-datepicker.js가 아니라, vuejs-datepicker.d.ts 로 등록하고 있었습니다만, 빌드시에 나오는 이하의 에러에 의해 진행하지 않고...



반나절 정도 조사했습니다만, 원인 모르고, vuejs-datepicker.js 로 등록했습니다. (이것으로 좋았습니까?)

nuxt.config.js에 등록

nuxt.config.js

plugins: [
     { src: '~/plugins/vuejs-datepicker.js', mode: 'client', ssr: false }, //追加
]

구성 요소에서 호출

DatePicker를 사용하려는 구성 요소로 Datepicker 구성 요소를 가져옵니다.

import DatePicker from 'vuejs-datepicker/src/components/Datepicker.vue'

구성요소에 등록

components: {
  DatePicker
}

template에서 사용

<Datepicker />

이제 DatePicker가 표시되어야합니다 !!!

생각하지만, 다음과 같은 오류가.

stylus 가 로드되지 않은 것 같습니다.

stylus 및 stylus-loader 도입

$ npm i -D stylus stylus-loader

과연 움직일 것이다!

또 다른 오류가 ...

좋은 가운데 움직여 준다고 생각하는 곳입니다만, 붙어 this.getOptions is not a function 그리고 구그하면,

Nuxt.js에 Stylus를 넣어 보았지만 컴파일 오류로 인해 해결책

여기에서는, 새로운 버젼의 stylus-loader 가 대응하고 있지 않다고 하는 것으로, 1개 낡은 버젼의 stylus-loader 를 사용하면 대응할 수 있다고 하는 것이었다.

글쎄, 내 환경에서 ....

package.json

"stylus": "^0.54.8",
"stylus-loader": "^6.1.0",

그래서 버전을 떨어 뜨린다.

stylus-loader 버전 삭제

6계에서 5계로 떨어뜨려 본다

$ npm uninstall stylus-loader
$ npm i -D stylus-loader@5

비슷한 오류가 나오므로 기사대로 4 계열까지 떨어 뜨립니다 ...

$ npm uninstall stylus-loader
$ npm i -D stylus-loader@4

오류가 사라지고 브라우저에 DatePicker가 표시되었습니다!

요약

경위를 정리하면,

plugin 추가에 망설임

라는 것이었습니다.
어떻게 든 움직이는 것이 좋았습니다 ....