Nuxt3でVuetify3を使う方法

2023-06-11

Nuxt3 と Vuetify3 がGAになったのでセットアップ方法のメモです。

対応状況

Nuxt3 で Vuetify3 は利用可能です。
利用可能なのですが Nuxt2 で Vuetify を使う時に利用していた @nuxtjs/vuetify はメンテされてないのか Nuxt3 対応版が出ていません。
なので Vuetify のセットアップ処理だけ自分で少し実装する必要があります。

使い方

依存のインストール

Nuxt 本体と Vuetify の他に Vuetify のスタイルを読み込むのに sass を依存に追加する必要があります。

$ yarn add -D nuxt vuetify sass

プラグインの設定

Vuetify の初期化処理を行うのに Nuxt3 のプラグインの仕組みを使って初期化します。
以下の例は最低限の設定ですが必要であれば適宜設定を追加します。

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(createVuetify({
    components,
    directives,
  }))
})

ビルドの設定

nuxt.config.ts にビルドの設定を追加しビルドすれば動きます。

export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  }
})

バンドルサイズを最適化する

上記の方法だと Treeshaking されないのでバンドルサイズが最適化されず全部入りのファイルが生成されます。
バンドルサイズを最適化して小さくするにはもうひと手間必要になります。

Viteプラグインを依存に追加

vite-plugin-vuetify を依存に追加します。

$ yarn add -D vite-plugin-vuetify

ビルドの設定

nuxt.config.ts の modules にビルドの設定を追加します。
Nuxt 側の Vue 周りの処理と相性が悪いのか Vite の設定としてプラグインの設定を追加するのではなく Nuxt 側の設定からプラグインの処理を割り込ませる感じで設定する必要があるそうです。

import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  ...
  modules: [
    async (options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(vuetify()))
    },
  ],
  ...
})

プラグインからコンポーネントとディレクティブの設定を削除

Vite プラグインが使うコンポーネントとディレクティブを自動でいい感じにやってくれるのでコンポーネントとディレクティブの設定を削除します。

import { createVuetify } from 'vuetify'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(createVuetify())
})

その他の最適化方法

普通に使うだけなら上記の方法で問題ないのですが Vite プラグインの設定方法が通常と異なるため Nuxt3 の関連ツールと組み合わせて使うとエラーが出るケースが稀にあります。
その場合は Vite プラグインを使用せずに createVuetify() に使うコンポーネントとディレクティブを個別に設定するか、 Vue コンポーネント側でマニュアルでインポートすれば面倒ですがバンドルサイズを最適化出来ます。

createVuetify() で設定する場合はこんな感じ。

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(createVuetify({
    components: {
      VBtn
    },
  }))
})

Vue コンポーネント側で指定する場合はこんな感じ。

<script lang="ts" setup>
import { VBtn } from 'vuetify/components/VBtn'
</script>

<template>
  <v-btn>button</v-btn>
</template>