Vue.js (NuxtJS) + TypeScriptでSlickを使うならvue-slick-carouselがおすすめ

デザイナーさんが作ったHTML + CSSをNuxtJS + TypeScript化していましたが、カルーセルにslickというライブラリが使われていました。

レスポンシブにも対応していて、非常に高機能です。

しかし、jQueryに依存しており、メンテナンス性や、ファイルサイズ的によろしくないので代替案を探しました。

結論としてはvue-slick-carouselを使いました。
slickと互換性もあり、TypeScriptの型定義はなかったもののSSRにも対応していて素晴らしい。

Vueのコンポーネントとして使えるだけで、結局jQueryを使うし、メンテが終わっているのでNG
github.com

シンプルで良かったけどwindowを使っており、SSR対応が面倒そうだったのでNG
ssense.github.io

PC画面で3つ表示させたいけど対応してなかった、機能的にNG。関係ないけどMacへのインストール大変だった。
vuetifyjs.com

TypeScriptでエラーが出てしまうので、とりあえずdeclareだけしました。型書きたい。

# ./types/vue-slick-carousel.d.ts
declare module 'vue-slick-carousel'

# tsconfig.json
// 省略
"types": [
      "@types/node",
      "@nuxt/types",
      "./types/"
    ]
// 省略

GAミント至上主義