Nuxt3でVuetify3を導入する方法

導入ライブラリ

Vuetify3とは

Vuetifyは、Vue.jsをベースとした人気のあるUIライブラリの一つです。Material Designに基づいたデザインコンポーネントを提供しており、以下のような特長があります：

特長

1. Material Design基準: VuetifyはGoogleのMaterial Designガイドラインを完全にサポートしており、洗練されたユーザーインターフェースを簡単に構築できます。

2. 豊富なコンポーネント: ボタン、カード、モーダル、ナビゲーションバーなど、さまざまなUIコンポーネントが提供されており、すぐにプロジェクトに導入できます。

3. カスタマイズ性: テーマシステムを使用して、カラーパレットやスタイルを簡単にカスタマイズすることができ、プロジェクトに合わせたデザインが可能です。

4. レスポンシブデザイン: デフォルトでモバイルファーストのレスポンシブデザインをサポートしており、さまざまなデバイスに対応したページを作成できます。

5. コミュニティとサポート: 大規模なコミュニティが存在し、ドキュメンテーションも充実しているため、情報を容易に得ることができます。

まとめ

Vuetifyを使用することで、迅速に見栄えの良いモダンなウェブアプリケーションを作成できるため、開発者に多く利用されています。

issue

私が作業したissueは以下です。

必要なライブラリのインストール

• vuetify と vite-plugin-vuetify: VuetifyとそのViteプラグインを開発依存としてインストールしました。
• @mdi/font: Material Design Iconsのフォントパッケージをインストールしました。
• sass: Sass（CSSプリプロセッサ）をインストールしました。

vuetify

vite-plugin-vuetify

sass

導入コマンド

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font
npm i sass

設定ファイル

nuxt.config.ts

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  build: {
    transpile: ['vuetify'],
  },
  plugins: [
    '~/plugins/vuetify.ts',
  ],
  modules: ['@nuxt/eslint',
    (_options, nuxt): void => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
  ],
  eslint: {
    config: {
      stylistic: true,
    },
  },
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.css',
  ],
});

Nuxt.jsプロジェクトのビルド設定

vuetifyをトランスパイルするように指定しています。これは、vuetifyを使用する際に必要な設定です。

build: {
  transpile: ['vuetify'],
},

vuetify.tsプラグインを使用するための設定

plugins配列にプラグインのパスを追加することで、プロジェクト全体でそのプラグインを利用可能にします。

  plugins: [
    '~/plugins/vuetify.ts',
  ],

Viteの設定を拡張するためのフックを追加

vite:extendConfigフックを利用して、Viteの設定にvuetifyプラグインを自動インポートオプション付きで追加しています。
コメントでTypeScriptのエラーを無視する指示も含まれています。

  modules: ['@nuxt/eslint',
    (_options, nuxt): void => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
  ],

Nuxt.jsプロジェクトでViteを使用する際の設定

特に、Vue.jsのテンプレートにおけるアセットURLの変換を行うための設定を行っています。transformAssetUrlsは、テンプレート内のアセットURLを適切に変換するためのオプションです。

  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },

Nuxt.jsプロジェクトで使用するCSSファイルを指定

vuetify/lib/styles/main.sassはVuetifyのスタイルシートを、@mdi/font/css/materialdesignicons.cssはMaterial Design Iconsのフォントスタイルをプロジェクトに追加しています。
これにより、プロジェクト全体でこれらのスタイルを利用できます。

css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.css',
  ],

Vuetifyの設定をutilsディレクトリに追加

StoryBook導入時などのサードパーティーを追加していくことを考えてutilsディレクトリに分けておく

utils/vuetify.ts

import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light',
  },
});

Vuetifyを読み込むPluginsの設定

plugin/vuetify.ts

import vuetify from '../utils/vuetify';

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

まとめ

Vuetifyを導入することで、デザインの統一感を保ちつつ、コンポーネントの再利用性を高めることができます。
導入方法が少し複雑でありメモの用途として記事に残してます。
私以外に必要としている人に少しでも多く届きましたら幸いです。
設定ファイルの項目も ”おまじない” として覚えるのではなく、それぞれの設定の意味を理解しておくことが大事です。
そのために説明をしていきました。