Nuxt3のプロジェクトにVuetify3をインストールする | Nuxt3 その0006

参考にさせていただいたページ

公式ページ

• Get started with Vuetify 3 — Vuetify

その他のページ

• How to use Vuetify with Nuxt 3 | Cody Bontecou

はじめに

2023年1月4日現在の手順です。

この記事では以下のバージョンを使用しています。

• "nuxt": "3.0.0",
• "vuetify": "3.0.6"

vuetify3をインストールする

以下のコマンドで vuetify@next と sass をインストールします。

npm install --save-dev vuetify@next sass

以下の通りvuetify3がインストールされました。

{
  〜略〜
  "dependencies": {
    〜略〜
    "vuetify": "^3.0.6"
  }
}

src/plugins/vuetify.js

src/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を以下の通り記述します。ご自身の環境に合わせて適当に追記してください。

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  〜略〜
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})