事の発端
Appwrite というセルフホストのBaaS を見つけたので、使ってみたかったんですが、そもそも自分にはそれを利用するアプリケーションがないことに気づいたのでそれっぽいアプリを作ろうと思ったのがきっかけです。
最初はKotlin/JS で適当にやればいいかとも思ったのですが、JS に触れてみたいという思いもあったのでこの機会に始めてみようとなったわけです。
JS を始める
JavaScript についての知識はちょっとした文法程度しか知らないです。 とにかく手を動かせば慣れるでしょう。
Nuxt2 をやろう
前から使ってみたいフレームワークにNuxtがあったので、迷うことなくそれを採用したわけですが、これ同時にVueもやるのかよ…。
とりあえずVueのドキュメントを見たけど、当たり前だけどこれVue単体の使い方じゃん。
それっぽい単一ファイルコンポーネントってやつを確認したけど、これしかドキュメントないんですか…?
とか思ったらSFC(Single File Components) についてのもあったからよかったよかった。
とにかく、プロジェクト作成してやってみようということでcreate-nuxt-appを実行した。
これはNuxt2 とVue2 で構成されてる感じね。
なんかマイナーバージョン低いな…?
なんとなくわかった気もするけど、なんか依存関係ですごく警告来るのうっとうしいから、ベータ版になるけどNuxt3 をベースに勉強しようか。
Nuxt3 をやる
create-nuxt-appじゃなくてnpx nuxi init をつかうのね。
実行してすぐ完了したから爆速じゃんと思ったけど、ファイル数めっちゃ少ないじゃん。
最小構成でインストールしてくれる感じか。
yarn install して依存関係を満たして実行。
yarn dev -oしてみたけど、起動早いな。
おお、構成ファイルも大幅に変わってる…
これもしかしてNuxt3 にしたの間違いかもしれんな。
参照できるドキュメントも極端に少なくなるし。
やばいぞ。
とりあえず公式ドキュメント
ディレクトリ構成
app.vue
を使うとSPAを作れる感じか。
今までのNuxt のようにpages/ を作成すれば、app.vue
は参照されなくなる代わりにpagesディレクトリ内のVueのSFCがファイル名で対応するみたい?
app.vue
のみの運用だとvue-router を使用しないからバンドルサイズが小さくなるメリットもあるみたい。
詳細はここから
デプロイについて
Nuxt3 はSSG に対応していないので、Cloudflare Pages などでデプロイすることはできない。
もしCloudflare でデプロイする場合は、Cloudflare Workers を利用することになる。
同様の理由からGitHub Pages も利用できない。
Tailwind CSS
なんかTailwind CSSも使いたくなってきた。
このサイトを参考にする。
以下のコマンドでTailwindCSS とそれに必要なパッケージを追加した。
|
|
次にtailwind.config.js を作成して編集する。
いちいち作成するのも面倒なのでコマンドを使った。
|
|
これを使ってtailwind.config.js を生成。
その後以下のように編集。
|
|
最後にnuxt.config.ts の編集。
|
|
編集が終われば、起動をしてクラスにCSSが割り振られているか確認。
うまくいきました。