JS初心者がNuxt3 を使うとこうなる【Nuxt3あそび】

事の発端

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 とそれに必要なパッケージを追加した。

1
yarn add tailwindcss postcss autoprefixer

次にtailwind.config.js を作成して編集する。

いちいち作成するのも面倒なのでコマンドを使った。

1
npx tailwindcss init

これを使ってtailwind.config.js を生成。

その後以下のように編集。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
module.exports = {
  content: [
    './app.{vue,js,ts,jsx,tsx}',
    './components/**/*.{vue,js,ts,jsx,tsx}',
    './layouts/**/*.{vue,js,ts,jsx,tsx}',
    './pages/**/*.{vue,js,ts,jsx,tsx}',
    './plugins/**/*.{js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

最後にnuxt.config.ts の編集。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
export default defineNuxtConfig({
    // これと
    css: [
        '@/assets/css/main.css'
    ],

    // これを追記する。
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {}
                }
            }
        }
    }
})

編集が終われば、起動をしてクラスにCSSが割り振られているか確認。

うまくいきました。