ソリッドシード株式会社

Nuxt3を使ってみた!

2022年3月29日

採用した経緯

自社サービスのエンジニアルートで追加機能要望など今後の展開を考えると現状のシステム構成では対応がしづらいと判断し、対応するにはマイクロサービス化が適していると考えました。
そこでフロント画面を現在はLaravelのBladeを使用しているのでJavaScriptのフレームワークに変えようと考え検討しました。
最初にVue.jsReact.jsの2つに絞り、その上でさらにVue.jsを効率的にするNuxt.jsとReact.jsを効率的にするNext.jsのどちらにするか悩み最終的にNuxt.jsに決めました。
決めてとしては、React.jsよりVue.jsの方が学習コストが低いと感じ、Vue.jsはCDNを提供しておりNode.jsを使用できない案件でも使用できるので活用範囲が広く会社のメリットにもなると考えました。
Vue.jsだけだとルーティングの設定など開発する中でやる事が多く効率が悪いのでNuxt.jsにして、新バージョンのNuxt3がパブリックベータ版の公開から半年以上経過しており、2022年6月に安定版をリリースする予定のため今後はNuxt3に切り替わると思い決めました。

使用してみてどうか?

パブリックベータ版なので色々とバグが発生すると思っていましたが、特に問題無く使用できてます。
情報が少ないというデメリットがありますが、Nuxt2から記述方法は変わっているが根本的な部分は変わって無いのと大元がVueなので仕様の把握はできています。
Nuxt3からVue3になるためComposition APIなどの機能やデフォルトでTypeScriptになっていたりと使用感はとても良いです。

情報共有

APIデータを取得するのにuseFetchが導入されたのでaxiosが無くても大丈夫ですが、「@vue/axios」がNuxt3ではエラーで使用できないです。
ただ、試しに「@vue」では無い「axios」をインストールして動作検証したら使用できました。

「yarn dev」でViteが起動しプログラムを編集するとリアルタイムで画面に反映されるが、常に更新が走るので動的な処理が確認しづらいです。
動的な処理を確認する場合は「yarn build && yarn start」だとViteは起動しないので確認できます。

投稿者:Saito