Nuxt3でVuetify3を使ってみた

# はじめに
業務でVuetifyを使いそうな気がするので勉強がてら記事を書きました。
下記の記事を参考にさせていただきました。

https://zenn.dev/one_dock/articles/ab6d178741956d#2.-vuetify3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

# 事前準備
Nuxt3の環境構築が済んでいる前提です。

# 環境
* macOS Monterey：12.6
* Node.js：18.12.1
* Nuxt.js：3.0.0
* Vue.js：3.2.45

# 1. Vuetifyをインストールする
`Vuetify`をインストール
```sh
yarn add vuetify@next
```
`sass`もインストール
```sh
yarn add sass
```

# 2. vuetify.jsを作成
ルートディレクトリに`plugins`を作成し、その中に`vuetify.js`を作成
```plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components
  })

  nuxtApp.vueApp.use(vuetify)
})
```

# 3. nuxt.config.tsにVuetifyの設定を追加
```nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    }
  },
})
```
1行目は書かなくても動きますので、明示的に`import`したい場合のみ書いてください。

# 4. コンポーネントを使用する
実際にコンポーネントを使ってみます。
`app.vue`を編集します。
```app.vue
<template>
  <div>
    <v-container>
      <v-btn
        depressed
        color="primary"
      >
        Primary
      </v-btn>
      <v-btn
        depressed
        color="error"
      >
        Error
      </v-btn>
    </v-container>
  </div>
</template>
```
下の画像のように表示されれば設定成功です。
![buttons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1046681/2a717008-1e72-c0f7-9952-8acb47126f6d.png)

# 5. アイコンを使用するための設定
`mdi`をインストールします。
```sh
yarn add mdi
```

`nuxt.config.ts`を修正します
```nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'], // 修正
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    }
  },
})
```

アイコンが使えるか確認するために`app.vue`を編集します。
```app.vue
<template>
  <div class="text-center">
    <div>
      <v-btn
        class="ma-2"
        color="primary"
        dark
      >
        Accept
        <v-icon
          dark
          right
        >
          mdi-checkbox-marked-circle
        </v-icon>
      </v-btn>
      <v-btn
        class="ma-2"
        color="red"
        dark
      >
        Decline
        <v-icon
          dark
          right
        >
          mdi-cancel
        </v-icon>
      </v-btn>
      <v-btn
        class="ma-2"
        dark
      >
        <v-icon
          dark
          left
        >
          mdi-minus-circle
        </v-icon>Cancel
      </v-btn>
    </div>
  </div>
</template>
```

ボタンの中にアイコンが表示されればOKです。
![icons.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1046681/4f3c7370-5fef-0307-7178-1bc386085ed7.png)


# 6. Directivesを使用するための設定
Directivesはユーザーのアクションに反応してUIが変化するような機能です。
![名称未設定.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1046681/8cf250fa-1623-69a9-6ca0-29fa37beaee8.gif)

設定方法ですが、`vuetify.js`を修正するだけです。
```vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives' // 追加

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives // 追加
  })

  nuxtApp.vueApp.use(vuetify)
})
```

実際に試してみます。
`app.vue`ファイルを編集します。
```app.vue
<template>
  <div>
    <v-container>
      <div
        v-ripple
        class="text-center elevation-2 pa-12 text-h5"
      >
        HTML element with v-ripple
      </div>
    </v-container>
  </div>
</template>
```
アクセスすると先ほどの動画と同じ画面が表示されますので、動作確認してみてください。


# おわりに
ここまで見ていただきありがとうございました。
この記事で使用したもの以外にもたくさんコンポーネントがあるのでぜひ確認してみてください。

https://next.vuetifyjs.com/en/components/all/


# 参考
https://zenn.dev/one_dock/articles/ab6d178741956d#2.-vuetify3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

https://next.vuetifyjs.com/en/getting-started/installation/

https://next.vuetifyjs.com/en/components/icons/

https://next.vuetifyjs.com/en/directives/ripple/