Nuxt.jsでアプリ

Nuxt.js

Vue.js用のフレームワークとなってます。
Vue.jsを素のまま使うより色々便利。
個人的にはAutoインポートが便利です。
Vue.js使ってたときみたいに一々以下みたいなコードを書かなくて済みます。コードもスッキリ。

import { ref, onMounted } form 'vue'

Nuxt.jsではTypeScript(.ts)が基本になっています。JavaScript(.js)は選択できません。
最大の売りはサーバーサイドレンダリング(SSR)らしいのですが、まだ使ったことないので恩恵がわからない。

プロジェクト作成

Node.jsがインストールされていれば問題ありません。

> npx nuxi@latest init MyApp
Need to install the following packages:
  nuxi@3.9.0
Ok to proceed? (y)       ■そのままEnter。nuxiが未インストールの場合に出るようです。
> Which package manager would you like to use?
> npm                    ■パッケージマネージャの選択です。npmのままEnter。
pnpm
yarn
bun
> Initialize git repository?
> Yes / No               ■.gitディレクトリ作ります。YesでEnter。

これでプロジェクトの雛形作成完了です。
後はNode.jsのプロジェクトらしく以下で実行ですね。

> cd MyApp
> npm install
> npm run dev

Nuxt 3.7.3 with Nitro 2.6.3

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

√ Nuxt DevTools is enabled v0.8.4 (experimental)
i Vite client warmed up in 1327ms
√ Nitro built in 796 ms

npm run で実行できるコマンドはpackage.jsonの"scripts"に記述されてるんですが以下のようになってます。

コマンド	実行内容	説明
build	nuxt build	ビルド後.outputフォルダに出力。 サーバー用
dev	nuxt dev	Webサーバー起動。buildとかgenerateとかはする必要はありません。
generate	next generate	ビルド後.output/publicフォルダに出力 index.htmlを含みブラウザだけで実行できます。
preview	nuxt preview	buildでビルドした内容をプレビューします。
postinstall	nuxt prepare	今一不明。SSR真面目にやるとわかるようになるかも。

nuxt xxxxx の詳細は Commandsにあります。

生成されたファイルについて

ファイル	説明
app.vue	ページが1頁しかないような場合、後述のpagesを作成しなくともこのファイルがトップページになります。
nuxt.config.ts	Nuxt設定ファイル

Nuxtのフォルダ構成について

Nuxtの場合フォルダが重要です。pagesやcomponentsなどフォルダ名に意味がありそこに格納されているソースはフォルダ毎のルールに従う必要があります。
例えばpagesなどはディレクトリ構造がそのままURLマップになってたりします。
Nuxtでは初期状態ではこれらのフォルダは作成されていませんので必要なら自分で作成します。
詳細は Directory Structureを参照してください。

フォルダ	説明
pages	*.vueの格納先、ディレクトリ構造がそのままURLマップになります。
components	ページ内で使用する小さなコンポーネント。
composables	共通定義。ここで定義されたものは自動的にインポートされます。
content	Nuxt Content(CMS)用。
layouts	レイアウト/テーマを定義します。default.vueを作ると指定されていないページ全てに適用されます。
middleware	ページ切り替え直前に呼び出されます。認証/認可機構やフィルタなど。
modules	ローカル作成のnuxt用モジュールの格納先。 https://nuxt.com/modules 等で公開されてるいモジュールのローカル版です。
plugins	axiosなどJavaScriptライブラリのラップクラスを置きます。 Vueインスタンスにアクセスできるのが実質ここだけなのでVue.useなど使いたい場合はここに配置します。Vue.jsで言う所のmain.jsの代わり？
server	SSR用、RestAPIのコードはここに配置します。こちらもpages同様ディレクトリ構造がそのままURLマップになります。プレフィクス /api が付きます。
utils	composablesと意味的には同じで、開発時の管理上分けたいときに使ってほしいそうです。
public	静的コンテンツ。こちらに配置した場合は直接URLで参照できます。 ./public/img/abcdefg.png がある場合は http://localhost:3000/img/abcdefg.png でアクセスできます。
assets	静的コンテンツ。こちらは直接URLではアクセスできません。隠蔽したいリソースはこちらに配置します。 *.vueなどから参照する場合は<img src="~/assets/img/xxxxx.png"/>のように指定します。

VSCodeでの開発

拡張機能として以下を入れる必要があります。ほぼ必須。

• Volar

以下の拡張機能が入ってる場合は無効化するかアンインストールした方がよいです。Vue2を開発してた人はたぶん入ってる。両方入ってるとなんかよくわからないことになってしました。

• Vetur

---

取っ掛かりとしてはこんなところでしょうか。
Nuxt.jsの本家サイトのドキュメントがかなり充実しているので詳細はそちらを見たほうがいいです。充実してるだけに量も多いですけど。