【Nuxt.js TypeScript】 V-Calendar でハマった話

V-Calendar
https://vcalendar.io/

パッケージ追加（yarn）

$ yarn add v-calendar

ビューのソース

<template>
 <div>
   <v-calendar />
 </div>
</template>

<script lang="ts">
import Vue from 'vue'
import VCalendar from 'v-calendar'

export default Vue.extend({
 components: {
   VCalendar
 }
})
</script>

ここでインポート部分で以下のように怒られちゃいます

Could not find a declaration file for module 'v-calendar'. '/Users/xxxxx/Desktop/nuxt/calender-test/node_modules/v-calendar/lib/v-calendar.umd.min.js' implicitly has an 'any' type.
 Try `npm install @types/v-calendar` if it exists or add a new declaration (.d.ts) file containing `declare module 'v-calendar';`Vetur(7016)

TypeScript 用の型定義ファイルが無いのが原因みたいです。
定義ファイルである @types/v-calendar を追加してみてと書いてるので、試してみます。

$ yarn add @types/v-calendar
yarn add v1.22.4
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@types%2fv-calendar: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/xxxxx/Desktop/nuxt/calender-test/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

NotFound になりました。型定義ファイル無いみたいですね。。。

この場合は型定義ファイル（.d.ts）を自前で用意する必要があります。
プロジェクトディレクトリのルートに @types というディレクトリを作成して、その中に v-calendar.d.ts というファイルを作成
中身はこんな感じ。

[v-calendar.d.ts]

declare module 'v-calendar'

※ デフォルトでは @types というディレクトリで型定義ファイルを参照行く設定になってるようです。
型定義ファイルの置き場所を@types以外で指定したい場合は tsconfig.json で以下のように設定すれば良いようです。

参考: TypeScript で型定義ファイル( d.ts )がないときの対処法

[tsconfig.json]


{
 "compilerOptions": {
   "typeRoots" : [".d.tsを入れるディレクトリのパス"]
 }
}

型定義ファイルを追加したことでとりあずエディタ（VS Code）での警告は消えました。

プレビュー確認してみると。。。

なにやらよくわからないエラーが。。。

色々調べて解決策っぽいものを見つけました。
[Nuxtjs] How to set v-calendar

SSR 部分が関係してるっぽいですね。
とりあずそのとおりにやってみます。

[/plugins/v-calendar.js]

import Vue from 'vue'
import Vcalendar from 'v-calendar'
// import 'v-calendar/lib/v-calendar.min.css';

Vue.use(Vcalendar, {             // second is optional
 datePickerTintColor: '#F00',
 datePickerShowDayPopover: false
})

※ ↑自分のインストールした v-calendar のバージョンでは import 'v-calendar/lib/v-calendar.min.css'; は存在しないのでコメントアウトしました。

[nuxt.config.js]

plugins: [
 ...
 { src: '~plugins/v-calendar.js', ssr: false }
]

コンポーネントのインポートをプラグインの設定ファイル側に移したのでビュー側のソースも修正

<template>
 <div>
   <no-ssr>
     <v-calendar />
   </no-ssr>
 </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({})
</script>

再度確認

$ yarn dev

表示されました。