Nuxt.jsにvuejs-datepickerを導入するまでに時間がかかったので解決メモ

はじめに

タイトルのとおり、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します

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 が対応していないということで、１つ古いバージョンの 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の追加に躓く（typescriptなのに、pluginファイルは.jsでいいのか...） -> ｓｔｙlusが読み込めていない -> stylus-loadeが新しいバージョンだと動かない ->　ようやく動く

ということでした。
なんとか動いてよかったです....