Zenn
株式会社ROBONの技術ブログPublicationへの投稿
⛰

いまさらNuxt3（その１）

荒木 岳夫
に公開
Vue.js
ESLint
Vuetify
Nuxt 3
Vitest
tech

はじめに

当社では、様々な SaaS を提供していますが、その多くは、Vue.js の SPA からクラウド上の API を呼び出す形式です。

これはこれで良いのですが、じっくりブラウザ上で SPA が動くという形式ではなく、各ユーザーさんのユースケースとしては、１画面か２画面で完結する、ポップアップや一時的にタブ上で動くシナリオを想定したアプリケーションを作ることになりまして、従来型の完全にサーバーサイドでレンダリングするパターンに戻っても良いのですが、Nuxt で SSR したら、これまでの Vue.js の知見も活かせて良いんじゃないの？ということで、いまさらですが Nuxt に入門してみましたという記事です。

環境をつくる

前提条件

前提条件というか、環境構築をする前の状態です。ご参考まで。

ソフトウェア バージョン 備考
OS Amazon Linux release 2023.6.20250218 既存の開発環境
Node.js v20.11.1 既存の開発環境
pnpm 10.4.1 いくつかプロジェクト作るので

Nuxtプロジェクトの作成

以下を参照しましょう。

https://nuxt.com/docs/getting-started/installation

$ 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

以下を参照しましょう。

https://eslint.nuxt.com/packages/module#quick-setup

上のとはちょっと変えて、--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 拡張

こいつこちらです。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

3.0.10 が、2025/2/25 時点のバージョンですが、こいつこちらがちょっと調子が悪いので、プレリリース版の 3.0.13 にします。

pnpm で動かす

ここに書いてあるとおりにしました。

https://eslint.nuxt.com/packages/module#npm-scripts

package.json
@@ -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

まずは、以下のサイトを見ました。

https://vuetifyjs.com/en/getting-started/installation/#manual-setup

https://nuxt.vuetifyjs.com/guide/#installation

で、結局、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 のを採用して、以下のようにします。

nuxt.config.ts
@@ -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

以下に書いてあるとおりです。

https://nuxt.com/docs/getting-started/testing#installation

$ 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 の編集は自分でしました。

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 時点は、こんな感じで環境を構築すると動きます。次回以降、開発していこうと思います。

GitHubで編集を提案
株式会社ROBONの技術ブログ
株式会社ROBONの技術ブログPublication

わたしたちの社名は「全ての業務にロボットをオン（実装）する」ことに由来します。また、「IT技術で全てのお客様の生産性を飛躍的に向上させる」ことを経営理念としています。 ROBONとROBONで活躍するエンジニアの描く未来にご期待ください。

Discussion

ログインするとコメントできます