Nuxt3でVuetify3を導入する方法

## 導入ライブラリ

https://vuetifyjs.com/en/getting-started/installation/#get-started-with-vuetify-3

## Vuetify3とは

Vuetifyは、Vue.jsをベースとした人気のあるUIライブラリの一つです。Material Designに基づいたデザインコンポーネントを提供しており、以下のような特長があります：

### 特長

1. **Material Design基準**: VuetifyはGoogleのMaterial Designガイドラインを完全にサポートしており、洗練されたユーザーインターフェースを簡単に構築できます。

2. **豊富なコンポーネント**: ボタン、カード、モーダル、ナビゲーションバーなど、さまざまなUIコンポーネントが提供されており、すぐにプロジェクトに導入できます。

3. **カスタマイズ性**: テーマシステムを使用して、カラーパレットやスタイルを簡単にカスタマイズすることができ、プロジェクトに合わせたデザインが可能です。

4. **レスポンシブデザイン**: デフォルトでモバイルファーストのレスポンシブデザインをサポートしており、さまざまなデバイスに対応したページを作成できます。

5. **コミュニティとサポート**: 大規模なコミュニティが存在し、ドキュメンテーションも充実しているため、情報を容易に得ることができます。

### まとめ

Vuetifyを使用することで、迅速に見栄えの良いモダンなウェブアプリケーションを作成できるため、開発者に多く利用されています。

## issue

私が作業したissueは以下です。

https://github.com/nakajima-sh-cnctor/re1999/issues/10

### 必要なライブラリのインストール

- `vuetify` と `vite-plugin-vuetify`: VuetifyとそのViteプラグインを開発依存としてインストールしました。
- `@mdi/font`: Material Design Iconsのフォントパッケージをインストールしました。
- `sass`: Sass（CSSプリプロセッサ）をインストールしました。

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

### vite-plugin-vuetify

https://www.npmjs.com/package/vite-plugin-vuetify

### sass

https://sass-lang.com/install/

### 導入コマンド

```bash
npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font
npm i sass
```

## 設定ファイル

:::details 設定ファイル全体
```ts:nuxt.config.ts
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  build: {
    transpile: ['vuetify'],
  },
  plugins: [
    '~/plugins/vuetify.ts',
  ],
  modules: ['@nuxt/eslint',
    (_options, nuxt): void => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
  ],
  eslint: {
    config: {
      stylistic: true,
    },
  },
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.css',
  ],
});
```
:::

### Nuxt.jsプロジェクトのビルド設定

vuetifyをトランスパイルするように指定しています。これは、vuetifyを使用する際に必要な設定です。

```ts
build: {
  transpile: ['vuetify'],
},
```

### vuetify.tsプラグインを使用するための設定

plugins配列にプラグインのパスを追加することで、プロジェクト全体でそのプラグインを利用可能にします。

```ts
  plugins: [
    '~/plugins/vuetify.ts',
  ],
```

### Viteの設定を拡張するためのフックを追加

vite:extendConfigフックを利用して、Viteの設定にvuetifyプラグインを自動インポートオプション付きで追加しています。
コメントでTypeScriptのエラーを無視する指示も含まれています。

```ts
  modules: ['@nuxt/eslint',
    (_options, nuxt): void => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
  ],
```

### Nuxt.jsプロジェクトでViteを使用する際の設定

特に、Vue.jsのテンプレートにおけるアセットURLの変換を行うための設定を行っています。transformAssetUrlsは、テンプレート内のアセットURLを適切に変換するためのオプションです。

```ts
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
```

### Nuxt.jsプロジェクトで使用するCSSファイルを指定
vuetify/lib/styles/main.sassはVuetifyのスタイルシートを、@mdi/font/css/materialdesignicons.cssはMaterial Design Iconsのフォントスタイルをプロジェクトに追加しています。
これにより、プロジェクト全体でこれらのスタイルを利用できます。

```ts
css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.css',
  ],
```

## Vuetifyの設定をutilsディレクトリに追加
StoryBook導入時などのサードパーティーを追加していくことを考えてutilsディレクトリに分けておく


```ts:utils/vuetify.ts
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
  },
});
```

## Vuetifyを読み込むPluginsの設定


```ts:plugin/vuetify.ts
import vuetify from '../utils/vuetify';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(vuetify);
});
```

## まとめ

Vuetifyを導入することで、デザインの統一感を保ちつつ、コンポーネントの再利用性を高めることができます。
導入方法が少し複雑でありメモの用途として記事に残してます。
私以外に必要としている人に少しでも多く届きましたら幸いです。
設定ファイルの項目も **”おまじない”** として覚えるのではなく、それぞれの設定の意味を理解しておくことが大事です。
そのために説明をしていきました。