目的

• Nuxt3, Vue3 のキャッチアップ
• Nuxt3 の技術やスケールを踏まえたアーキテクチャの再考
• その他 Tailwind.css などのお勉強も込み

todo(思いついたら更新していく)

• Tailwind.css の導入
• axios などの plugin の導入
• composition-api の理解と既存サービスのリアーキテクト
• その他機能の追従

pages や layouts を追加

• （2021-10-20 時点で）Nuxt 3 のプロジェクトを作ったばかりだと Nuxt でよく見る pages や layouts などのフォルダが存在せず app.vue だけが存在する
• ドキュメントによると app.vue があればそれを優先的に読みに行きなければ pages 配下を読みに行くそう
  • https://v3.nuxtjs.org/docs/directory-structure/app
  • 1 ページの LP 作るのに有効と意見があった
• 今回は複数ページあるアプリを作っていくため app.vue はリネームして pages や layouts などのフォルダを作り中にいくつか vue ファイルを作成

Tailwind CSS の導入

• 公式ドキュメント のやり方だとできない
• Github の issue にあったコメントを拾って設定するとできた
  • https://github.com/nuxt-community/tailwindcss-module/issues/387#issuecomment-943645702
• Tailwind CSS に関しては実際に実装時に触れていく

外部 API へリクエスト axios の導入 useFetch と useAsyncData

• axios 導入は今まで適当な記事を参考にして行っていたが Nuxt3 だとまだできなさそう
• とりあえず nuxt config の modules に @nuxtjs/axios を追加してみたがエラーが起きてビルドできず…
• nuxt の axios module に issue が起票されていたのでそれをウォッチする
  • https://github.com/nuxt-community/axios-module/issues/536
• いい機会なのでなんでできないのか自分なりに調べて理解につなげたい

追記

• そもそも useFetch や useAsyncData などを使って取得する方法が Nuxt3（Composition API）にはあるっぽい
• ただこれを使っても外部 API からデータ取得ができない
  • server 側の記述が必要なのだろうか...？
  • useFetch の options に baseURL があるからそこに外部の API を追加
  • ドキュメント