Nuxt.jsの良いところとハマリどころ

はじめに

私が良いと思ったところやハマったところなどを紹介していきます。
これから Nuxt.js に触れる方の知見になれば幸いです。

良いところ

Vue Cli でテンプレートが提供されている

$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

のようにすることで何も考えること無くプロジェクトが立ち上がります。

Vuex Vue-Router が初めから内包されている

先ほどのテンプレートでプロジェクトを作ると、初めから Vuex・Vue-Router が使えます。
ページの描画前にストアにデータを入れるメソッドがあったり、 Vue-Router で画面遷移する際、アニメーションを適用できたりします。

サーバサイドレンダリングできる

Nuxt.jsはアプリケーションをサーバサイドレンダリングできるフレイムワークです。
バックエンドでも処理をしたい場合は、expressやadonis.jsと統合することも可能です。
統合した場合でも、Vueのコードはサーバサイドレンダリングされます。

静的ページも作成できる

nuxt generateコマンドを使うことで、静的ページを作ることも可能です。
netlifyなどの静的ホスティングサービスにUpしても動作するのでそういう用途にも使えます。

ミドルウェアがある

ミドルウェアを使うことで、ページがレンダリングされる前に実行する処理をかけます。
ログインしていなければTopページにリダイレクトするなんていうよくある処理もかけます。

ハマリどころ

コンテキストが難しい

Nuxt.jsで提供されている api はよく引数で state や app などのコンテキストが落ちてきます。
どのメソッドでどのコンテキストが落ちてきて、どのデータにアクセスできるのかという説明があまりドキュメントにないので私はハマリました。
今の所contextをconsoleで吐き出して見るのがベスト(?)だと思います

違うフレイムワークと統合する時には少なからず戦わないといけない

nuxt-express や adonuxt といったスターターがありますが、そういうものを使わずに自分で作った環境を統合する場合、それなりにエラーが出ると思うので、スターターのコードを参考にしながらするといいと思います。

ユニバーサルJSであるという点

フロントでもサーバサイドでも同じコードで運用できるというメリットがある一方、 window などのブラウザに依存するコードはエラーで死んでしまいます。
エラーが出て、なんか悪いことしたっけ？このエラー文なに？ってなった時に import してるモジュールがクライアントサイドでしか動かないコード使ってるみたいなことがよくあります。

ページコンポーネント内でしかFetchなどのAPIが使えない

一部の非同期APIがPagesディレクトリ内でしか使えません。
違うディレクトリで扱うとエラーが出ます。

再利用したくないコンポーネントの置き場所に悩む

見通しを良くするために分けたもの置き場所に悩みます。
Pagesディレクトリに置いてしまうと自動でrouteとして登録されてしまうし、どこに置くのが綺麗なんでしょうか？いい方法があればご教授お願いします。