Nuxt with TypeScriptのセットアップ方法

タイトルをするのに、de factoがわかりにくかったので、調査してまとめてみました。

歴史

nuxtのTSサポートissueこちら：
https://github.com/nuxt/create-nuxt-app/issues/23

issueの番号を見てもわかるように、create-nuxt-appが作成された当時からあったissueで、セットアップをするタイミングによって一番イケてる方法が違う様子がわかります。

セットアップ方法

今取れる方針は、概ね以下の3つに大別できます。

1. vue-cliから使用できるtemplateを使用。いくつかありそう。(Typescript starter with Nuxt.js)
2. create-nuxt-appでscaffoldして、@nuxt/typesなどなどでsetupする(setup-guide)
3. create-nuxt-app-tsでscaffoldする

結論

頑張るならどれでもいいです。気合い入れて、どうぞ。

予めセットアップされてるとやりづらいなら、2. がもっともpre-installのライブラリが少ないのでおすすめできそうです。

ts移行は軽く、axiosやexpressなどのライブラリのセットアップが重いと見るなら1が良さそうです。uiライブラリで使いたいやつがリストにある場合もこれが楽ですね。

vuetify, prettier, pug, eslintで十分だと思うなら3.がもっとも楽です。

ちなみに、nextjsはzero-config ts supportをしているらしいので、初心者向けかもしれない。。
https://nextjs.org/blog/next-9#built-in-zero-config-typescript-support

最後に

Reactの方が難しい、という宗教の方がいますが、個人的にはむしろvue/nuxtの方が難しい印象を持ちました…
特に、仕組みを理解してセットアップするのは骨が折れそう、かも？