Nuxt3.4.2 + Vuetify3.1.15 環境設定のメモ

久しぶりに最新版の [Nuxt3](https://nuxt.com/) と [Vuetify3](https://vuetifyjs.com/en/getting-started/installation/) を導入したので自分メモです。

## とりあえず導入

現在の環境はこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/c4c0c091-22e6-c99f-9dce-2793159dfc08.png)
`npx nuxi@latest init nuxt3-202304` を実行したら、特に何も聞かれず完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/95bf3a51-7ee0-8454-a86f-c8ff6a242540.png)
シンプルかつ最低限ですね。
```json:package.json
{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@types/node": "^18",
    "nuxt": "^3.4.2"
  }
}
```
`npm install` と `npm run dev` で問題なくWeb表示。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/0d9af5cc-e1ce-95c8-dd7f-891750e85f2d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/7c8d8bd0-3760-69df-c53d-67064d4d1e12.png)
また `npm run build` で `.output` フォルダが生成されたので、`node .output/server/index.mjs` で同様のページが表示されることを確認した。

この状態を GitHub に [init ブランチ](https://github.com/yamachan/nuxt3-202304/tree/init) として push しておく。

## TypeScript 導入

試しに `npx nuxi typecheck` を実行してみたら、勝手に導入された。便利。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/50210881-c5dd-5b11-86ec-17e4118eaf3f.png)
とりあえず開発中の型チェックを厳密にするように設定しておく。
```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    typescript: {
        strict: true,
        typeCheck: true
    }
})
```
これで十分かと思ったら vue-tsc エラーになったので `npm i vue-tsc -D` と明示的に導入。最終的に `package.json` の開発用モジュールは以下になった。

```json:package.json
  "devDependencies": {
    "@types/node": "^18",
    "nuxt": "^3.4.2",
    "vue-tsc": "^1.4.2"
  }
```

## ページ作成

まずはお決まりのパターンで、`app.vue` ファイル中にあるデモ用のモジュール `<NuxtWelcome />` を `<NuxtPage />` に変更。
```vue:app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>
```
ダサダサな最小サンプルを作成してみる。
```vue:pages/index.vue
<template>
    <div>
        <h1>Welcome page</h1>
        count: {{ count }}
        <span @click="addCount">[+]</span>
    </div>
</template>

<script setup lang="ts">
const count = ref(0);
function addCount() {
    count.value++;
}
</script>
```
まあ動きますよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/c8face91-4b43-a1da-0898-ad15891f303a.png)

この状態を GitHub に [init-ts ブランチ](https://github.com/yamachan/nuxt3-202304/tree/init-ts) として push しておく。


## Vuetify 導入

[Nuxt 3 で Vuetify 3 を使う](https://zenn.dev/coedo/articles/nuxt3-vuetify3) ページを感謝しつつ読み、真似してセットアップ。まずは `npm i vuetify sass vite-plugin-vuetify -D` でモジュールを追加。
```json:package.json
  "devDependencies": {
    "@types/node": "^18",
    "nuxt": "^3.4.2",
    "sass": "^1.62.0",
    "vite-plugin-vuetify": "^1.0.2",
    "vue-tsc": "^1.4.2",
    "vuetify": "^3.1.15"
  }
```
あとは参考ページからコピペして以下のファイルを作成/更新。
* [plugins/vuetify.ts](https://github.com/yamachan/nuxt3-202304/blob/init-ts-vuetify/plugins/vuetify.ts)
* [assets/main.scss](https://github.com/yamachan/nuxt3-202304/blob/init-ts-vuetify/assets/main.scss)
* [nuxt.config.ts](https://github.com/yamachan/nuxt3-202304/blob/init-ts-vuetify/nuxt.config.ts)

先ほど作成したサンプルページを Vuetify の v-btn 部品を使ったものに書き換えて動作確認する。
```vue:pages/index.vue
<template>
    <div>
        <h1>Welcome page</h1>
        count: {{ count }}
        <v-btn color="primary" @click="addCount">+</v-btn>
    </div>
</template>

<script setup lang="ts">
const count = ref(0);
function addCount(): void {
    count.value++;
}
</script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/c22c3eac-b024-9671-8d6f-e72fe712b1ab.png)
この状態を GitHub に [init-ts-vuetify ブランチ](https://github.com/yamachan/nuxt3-202304/tree/init-ts-vuetify) として push しておく。

## というわけで

週末の朝、とりあえず手元の Nuxt3 + ts + Vuetify3 開発環境のベースを更新してみたので、その作業メモを残しました。これをもとに、いくつか Vuetify3 機能を試していこうと思っています。