Nuxt3でVuetify3の環境構築をする

Nuxt3環境をまずは作る

npx nuxi init nuxt3-app
cd nuxt3-app
npm install
npm run dev

Nuxt3にVuetifyの最新版とマテリアルデザインアイコン、sassをインストール

npm add vuetify@next mdi
npm add -D sass

ルートのフォルダの下にpluginsディレクトリを作り、vuetify.tsを作ります。

mkdir plugins
touch 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に追加

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

Vuetify3の動作確認

app.vueに以下を追加

<template>
  <div>
    <v-alert text="Vuetify3インストールテスト" type="success" variant="outlined"></v-alert>
    <v-icon>mdi-lead-pencil</v-icon>
    <v-icon>mdi-account</v-icon>
  </div>
</template>