Nuxt3でVuetify3を導入する方法
導入ライブラリ
Vuetify3とは
Vuetifyは、Vue.jsをベースとした人気のあるUIライブラリの一つです。Material Designに基づいたデザインコンポーネントを提供しており、以下のような特長があります:
特長
-
Material Design基準: VuetifyはGoogleのMaterial Designガイドラインを完全にサポートしており、洗練されたユーザーインターフェースを簡単に構築できます。
-
豊富なコンポーネント: ボタン、カード、モーダル、ナビゲーションバーなど、さまざまなUIコンポーネントが提供されており、すぐにプロジェクトに導入できます。
-
カスタマイズ性: テーマシステムを使用して、カラーパレットやスタイルを簡単にカスタマイズすることができ、プロジェクトに合わせたデザインが可能です。
-
レスポンシブデザイン: デフォルトでモバイルファーストのレスポンシブデザインをサポートしており、さまざまなデバイスに対応したページを作成できます。
-
コミュニティとサポート: 大規模なコミュニティが存在し、ドキュメンテーションも充実しているため、情報を容易に得ることができます。
まとめ
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
設定ファイル
設定ファイル全体
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ディレクトリに分けておく
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の設定
import vuetify from '../utils/vuetify';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(vuetify);
});
まとめ
Vuetifyを導入することで、デザインの統一感を保ちつつ、コンポーネントの再利用性を高めることができます。
導入方法が少し複雑でありメモの用途として記事に残してます。
私以外に必要としている人に少しでも多く届きましたら幸いです。
設定ファイルの項目も ”おまじない” として覚えるのではなく、それぞれの設定の意味を理解しておくことが大事です。
そのために説明をしていきました。
Discussion