１．はじめに
自社で「Power Portal Framework(仮)」の開発を開始しようとおもって、昔のリポジトリをコピーして作ろうと思ったけど
将来性を考えて、Nuxt2じゃなくて、Nuxt3で作ったほうが良さそうかなと思いました。
考えた結果、
Nuxt3を採用することにしました。
以下の記事を参考に、Vuetify3を入れました。
Nuxt3でハマったことなど、書いていきます。
２．予備知識
Nuxt3がNuxt2と違うところ。
いやぜんぜん違うやん。やめとけばよかったかな。
３．フォルダ構成
Nuxt2のときは、フォルダある程度できてたように思いますが Nuxt3 は無いです。
何から始めたらいいか迷子になりました。
とりあえず、必要になるであろうフォルダは先に作っておいたほうがいいのではと思いました。
composables
components
pages
public
plugins
４．ひながた
Vuetify2のときは、アプリのテンプレートがあったけど、Vuetify3は現時点でまだないみたい。
困りました。
以下を参考にさせてもらいました。
５．Composition API か Options API か
Nuxt3で一番困ったのはこれ。
最初、全然意味がわからなかった。
今まで使ってた、Data とかMountedとか書くやりかたが Options API で、Composition APIは違う書き方をするらしい。
従来の書き方でも書けるみたいだけど、どっちにするか悩む。
でもせっかくなので、Composition APIを採用することにしました。
Composition APIは、省略できるいろんな書き方があって、どれをコピペしたらいいのかが分からない。
一番コード量が少ないのは、Script Setup を使うことなんだけど、returnが省略できることなどがわかっていないと、他のソースとの整合性がわからなかった。
６．Typescript
Typescriptはよくない。
自作のモジュールのインポートができなくて悩む。
どうもTypesciprtのせいらしいけど、型定義ファイルの作り方で必死になったけど。無理だった。
結局、モジュール側を改修して対応。
TypeScriptのスコープの問題？でハマることがあった。
export {}
を書くといいらしい。意味なんか知らなくても大丈夫かな。
あと未解決の問題。
nuxt instance unavailable がたまに出て何が原因かわからない。
保存し直したらなおったりするので、さらによくわからない。
気づいたのは、types配下のフォルダのファイルを nuxt が自動的に更新することがあるみたいだけど、それらと関係があるのかな。
たいぷすくりぷと、だいぶ苦戦してます。やる意味あるかなぁと落ち込みながら以下の記事を読む。
７．その他
v-iconが表示されなかった。4h悩みました。以下に記事書きました。
８．コピペエンジニアのまとめ
よく考えたら、自分はコピペエンジニアだった。
ネットにソースがあまり転がってない状態で取り組むのはよくなかったかも。
一番の問題はここ。
あと、新しいことが多すぎて、それだったら、Reactにしようかなと4時間くらい浮気しました。
でもなんとかなりそうです。とりあえず、ログイン処理まではできたので、またハマったこと、気づいたことがあったら書いていきます。