いまさらNuxt3(その1)
はじめに
当社では、様々な SaaS を提供していますが、その多くは、Vue.js の SPA からクラウド上の API を呼び出す形式です。
これはこれで良いのですが、じっくりブラウザ上で SPA が動くという形式ではなく、各ユーザーさんのユースケースとしては、1画面か2画面で完結する、ポップアップや一時的にタブ上で動くシナリオを想定したアプリケーションを作ることになりまして、従来型の完全にサーバーサイドでレンダリングするパターンに戻っても良いのですが、Nuxt で SSR したら、これまでの Vue.js の知見も活かせて良いんじゃないの?ということで、いまさらですが Nuxt に入門してみましたという記事です。
環境をつくる
前提条件
前提条件というか、環境構築をする前の状態です。ご参考まで。
ソフトウェア | バージョン | 備考 |
---|---|---|
OS | Amazon Linux release 2023.6.20250218 | 既存の開発環境 |
Node.js | v20.11.1 | 既存の開発環境 |
pnpm | 10.4.1 | いくつかプロジェクト作るので |
Nuxtプロジェクトの作成
以下を参照しましょう。
$ pnpx nuxi@latest init 01
.d$b.
i$$A$$L .d$b
.$$F` `$$L.$$A$$.
j$$' `4$$:` `$$.
j$$' .4$: `$$.
j$$` .$$: `4$L
:$$:____.d$$: _____.:$$:
`4$$$$$$$$P` .i$$$$$$$$P`
ℹ Welcome to Nuxt!
ℹ Creating a new project in 01.
✔ Which package manager would you like to use?
pnpm
◐ Installing dependencies...
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Packages: +613
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 690, reused 607, downloaded 6, added 613, done
> nuxt-app@ postinstall /home/ec2-user/work/nuxt3/01
> nuxt prepare
✔ Types generated in .nuxt
dependencies:
+ nuxt 3.15.4
+ vue 3.5.13
+ vue-router 4.5.0
Done in 7.7s using pnpm v10.4.1
✔ Installation completed.
✔ Initialize git repository?
No
✨ Nuxt project has been created with the v3 template. Next steps:
› cd 01
› Start development server with pnpm run dev
初回起動時にファイルが作られるので、上に書いてあるとおりに起動しておきます。
$ cd 01
$ pnpm dev
> nuxt-app@ dev /home/ec2-user/work/nuxt3/01
> nuxt dev
Nuxt 3.15.4 with Nitro 2.10.4
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ DevTools: press Shift + Alt + D in the browser (v1.7.0)
✔ Vite client built in 27ms
✔ Vite server built in 326ms
✔ Nuxt Nitro server built in 887 ms
ℹ Vite client warmed up in 3ms
ℹ Vite server warmed up in 1075ms
以下も Nuxtプロジェクトのディレクトリで実行します。
ESLint
以下を参照しましょう。
上のとはちょっと変えて、--dev をつけておきます。
$ pnpx nuxi module add eslint --dev
ℹ Resolved @nuxt/eslint, adding module...
ℹ Installing @nuxt/eslint@1.1.0 as a development dependency
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Packages: +171
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 858, reused 773, downloaded 8, added 171, done
devDependencies:
+ @nuxt/eslint 1.1.0
Done in 5.2s using pnpm v10.4.1
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Already up to date
Progress: resolved 858, reused 781, downloaded 0, added 0, done
devDependencies:
+ eslint 9.21.0
Done in 1.8s using pnpm v10.4.1
ℹ Adding @nuxt/eslint to the modules
✔ ESLint config file created at /home/ec2-user/work/nuxt3/01/eslint.config.mjs
ℹ If you have .eslintrc or .eslintignore files, you might want to migrate them to the new config file
✔ Types generated in .nuxt
TypeScript
最初から TypeScript ちゃうんかい!と思われるかもしれませんが、上の ESLint で参照したページに従っておきます。
$ pnpm add -D typescript
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Already up to date
Progress: resolved 858, reused 781, downloaded 0, added 0, done
devDependencies:
+ typescript 5.7.3
Done in 1.7s using pnpm v10.4.1
VSCode の ESLint 拡張
こいつこちらです。
3.0.10 が、2025/2/25 時点のバージョンですが、こいつこちらがちょっと調子が悪いので、プレリリース版の 3.0.13 にします。
pnpm で動かす
ここに書いてあるとおりにしました。
@@ -7,7 +7,9 @@
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
- "postinstall": "nuxt prepare"
+ "postinstall": "nuxt prepare",
+ "lint": "eslint .",
+ "lint:fix": "eslint . --fix"
},
"dependencies": {
"nuxt": "^3.15.4",
上記を設定したら、動作確認をしておきます。
$ pnpm lint
> nuxt-app@ lint /home/ec2-user/work/nuxt3/01
> eslint .
$ pnpm lint:fix
> nuxt-app@ lint:fix /home/ec2-user/work/nuxt3/01
> eslint . --fix
VSCode for ESLint
いろいろなサイトを見て(一番近いのがどこか忘れました…)、以下のように設定しました。
ファイル名を間違えて、反映されないとハマることもあります。
{
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.format.enable": true
}
Vuetify
まずは、以下のサイトを見ました。
で、結局、Vuetify のサイトに書いてある vite-plugin-vuetify の代わりに、Vuetify Nuxt Module をインストールすることにしました。
$ pnpm i -D vuetify
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Packages: +1
+
Progress: resolved 859, reused 781, downloaded 1, added 1, done
devDependencies:
+ vuetify 3.7.13
Done in 3.5s using pnpm v10.4.1
$ pnpx nuxi module add vuetify-nuxt-module --dev
ℹ Resolved vuetify-nuxt-module, adding module...
ℹ Installing vuetify-nuxt-module@0.18.3 as a development dependency
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Packages: +28
++++++++++++++++++++++++++++
Progress: resolved 893, reused 782, downloaded 11, added 28, done
devDependencies:
+ vuetify-nuxt-module 0.18.3
Done in 2.7s using pnpm v10.4.1
ℹ Adding vuetify-nuxt-module to the modules
✔ Types generated in .nuxt
$ pnpm i @mdi/font
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Packages: +1
+
Progress: resolved 894, reused 793, downloaded 1, added 1, done
dependencies:
+ @mdi/font 7.4.47
Done in 1.8s using pnpm v10.4.1
で、設定は、Vuetify Nuxt Module のを採用して、以下のようにします。
@@ -2,10 +2,14 @@
export default defineNuxtConfig({
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
- modules: ['@nuxt/eslint'],
+ modules: ['@nuxt/eslint', 'vuetify-nuxt-module'],
eslint: {
config: {
stylistic: true
}
+ },
+ vuetify: {
+ moduleOptions: {},
+ vuetifyOptions: {}
}
})
Vitest
以下に書いてあるとおりです。
$ pnpm add -D @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core
WARN 2 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6
Packages: +39
+++++++++++++++++++++++++++++++++++++++
Progress: resolved 933, reused 794, downloaded 39, added 39, done
devDependencies:
+ @nuxt/test-utils 3.17.0
+ @vue/test-utils 2.4.6
+ happy-dom 17.1.8
+ playwright-core 1.50.1
+ vitest 3.0.7
Done in 8.1s using pnpm v10.4.1
ここは、nuxt.config.ts の編集は自分でしました。
@@ -1,6 +1,10 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
- modules: ['@nuxt/eslint', 'vuetify-nuxt-module'],
+ modules: [
+ '@nuxt/eslint',
+ 'vuetify-nuxt-module',
+ '@nuxt/test-utils/module',
+ ],
devtools: { enabled: true },
compatibilityDate: '2024-11-01',
eslint: {
そして、Vuetify のドキュメントも見ながら、vitest.config.ts を設定します。
import { defineVitestConfig } from '@nuxt/test-utils/config'
export default defineVitestConfig({
// any custom Vitest config you require
test: {
environment: 'nuxt',
environmentOptions: {
nuxt: {
domEnvironment: 'happy-dom',
},
},
server: {
deps: {
inline: ['vuetify'],
},
},
},
})
おわりに
ということで、本当は、いろいろ試行錯誤したのですが、2025/2/25 時点は、こんな感じで環境を構築すると動きます。次回以降、開発していこうと思います。
Discussion