NUXT3 に Vuetify3を導入して、mdi/font(materialdesign)まで使用できるよう設定するまで

〇 環境

フレームワーク: Nuxt3
導入するライブラリ: Vuetify3

〇 まずVuetifyをインストール

合わせてSassとVite用のライブラリもインストールします

$ yarn add vuetify sass vite-plugin-vuetify 

〇 Vuetiry関連読込用のファイルを作成

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({
    ssr: true,
    components,
    directives,
    // その他の設定
  })

  // Vue.js で Vuetify を使用する
  nuxtApp.vueApp.use(vuetify)
})

assets/main.scss

@use "vuetify/styles";

〇 Vuetifyを nuxt.config.ts で読込

nuxt.config.js

import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
.
.
.
  build: {
    transpile: ['vuetify'],
  },
.
.
.
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins!.push(vuetify())
    },
  },
.
.
.
  vite: {
    ssr: {
      noExternal: ['vuetify'],
    },
    define: {
      'process.env.DEBUG': false,
    },
  },
  css: ['@/assets/main.scss'],
.
.
.
})

〇 Vuetify確認

後は実際にVuetifyのドキュメントを参考にタグを配置して、正しく表示されれば Vuetifyの導入は完了です。

All Vuetify Components — Vuetify

〇 mdi/font (materialdesign)を導入

mdi/fontをインストール

mdi/fontをインストール

yarn add @mdi/font

main.scss で mdi/font を読込

@use "vuetify/styles";
@use "@mdi/font/css/materialdesignicons.css";

以上で全て終了です。
Nuxt3 に Vuetify の導入と、mdi/fontを使用を設定できました。

---

宣伝: Davop(声で連鎖するSNS)

Davop