Nuxt3 + Vuetify3の開発環境構築 (2022年5月時点の最新版)

Nuxt3がまだ不安定な状況で、執筆時点で公開されていた日本語記事通りに書いても正常に動作しなかったので、公式のDiscussionに載っていた情報を元に構築しました。

動作環境

Node.js v14 or v16 (v14.16.0での動作を確認済)
Nuxt 3.0.0-rc.1
Vuetify 3.0.0-beta.1

手順

まずNuxt3のプロジェクトを作ります。

npx nuxi init nuxt-app

nuxi がインストールされていない場合はインストールするか尋ねられるので、インストールしてください。
プロジェクトのディレクトリに移動し、必要なパッケージをインストールします。

yarn install

Vuetifyにsassが必要になるので追加します

yarn add vuetify@next sass

plugins フォルダを作ってその中に Vuetify.ts を以下のように作成します

plugins/vuetify.ts

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)
})

nuxt.config.ts を以下のように修正します

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

動作確認のために app.vue を修正します

app.vue

<template>
  <div>
    <v-btn>test</v-btn>
  </div>
</template>

アプリケーションを起動します

yarn dev

このようにボタンが表示されていたら動作確認OKです。

おまけ (マテリアルデザインアイコンを使いたい場合)

こちらも同じDiscussionに載っていたのでおまけで記載します。

まずパッケージを追加します。

yarn add mdi

nuxt.config.ts に追記します

uxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/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>
    <v-btn><v-icon>mdi-information</v-icon>button</v-btn>
  </div>
</template>

アイコンが表示されていたらOKです。

参考