これはなに
Nuxt 3のModulesに公式のVuetify 3モジュールがないので、自力で追加したときのメモ。
環境
- Nuxt 3.4.3
- Vuetify 3.2.4
Nuxt 3の環境作成
Nuxt 3のアプリ実装環境はNuxtのドキュメント に従って作成した。
npx nuxi init app
cd app
npm install
npm run devVuetify 3のインストールと設定
インストール
Vuetify本体をインストールする。
npm i vuetifysassパッケージを入れていない場合は追加する。
npm i -D sassプラグインの作成
NuxtのプラグインとしてVuetifyを使う。 基本的には、VuetifyのManual steps に従う。
pluginsディレクトリにvuetify.tsを作成し、以下の設定を書き込む。pluginsディレクトリがない場合は作成する。
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,
});
nuxtApp.vueApp.use(vuetify);
});Vue3にはSSRが使用されているかどうかを自動的に検出する方法がない
。そのため、ssrの値は、手動でnuxt.config.tsのssrと同じにする必要がある。nuxt.config.tsのssrはデフォルトでtrueなので、nuxt.config.tsのssrが何も設定されていないなら、plugins/vuetify.tsのssrをtrueにする。
'vuetify/styles'は、後述するnuxt.config.tsの修正で追加する。
ちなみに、Nuxt3では、pluginsディレクトリにプラグインファイルを作成すると、アプケーションの起動時に自動で登録してくれる。そのため、plugins/vuetify.tsを読み込むような記述は不要である。
nuxt.config.tsの修正
Vuetifyを追加したことをNuxtに知らせるため、nuxt.config.tsに以下の内容を追記する。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
css: ['vuetify/styles'],
vite: {
ssr: {
noExternal: ['vuetify'],
},
},
});build.transpileにVuetifyを追加して、Nuxtにこれらのライブラリをインポートしようとしないように指示する。
cssにVuetifyのCSSファイルを指定し、読み込ませる。これは先ほどスキップした'vuetify/styles'の追加に当たる。vite.ssr.noExternalにVuetifyを追加して、VuetifyがSSRのために外部化されるのを防ぐ。（ssr: trueのときに設定する）
ここまでの設定で、Vuetifyのコンポーネントは利用できるようになる。
<template>
<div>
<v-btn class="mx-5 my-2" color="primary" text="my-btn" />
</div>
</template>
ただし、ここまでだとアイコンボタンなどのアイコンを利用したコンポーネントは正常に処理されないため、アイコンを追加する。
アイコンの設定
今回はMaterial Design Iconsを利用する。また、利用するアイコンだけ読み込む形でアイコンを設定する。基本的に公式が提示するやり方 のとおりに設定すれば問題ない。
まず、plugins/vuetify.tsに、アイコンの設定を追記する。
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
+ import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
ssr: true,
components,
directives,
+ icons: {
+ defaultSet: 'mdi',
+ aliases,
+ sets: {
+ mdi,
+ },
+ },
});
nuxtApp.vueApp.use(vuetify);
});
次に、アイコンのパッケージをインストールする。
npm i -D @mdi/jsそして、アイコンを利用したい.vueファイルで、利用したいアイコンをimportして使う。
<script setup lang="ts">
import { mdiHome, mdiDotsVertical } from '@mdi/js';
</script>
<template>
<div>
<v-btn class="mx-5 my-2" :icon="mdiDotsVertical" />
<v-icon class="mx-5 my-2" :icon="mdiHome" />
</div>
</template>
Vuetifyに関するその他の設定
長くなったので別記事にまとめた。
