Featured image of post Nuxt 3の環境にVuetify 3を追加する

Nuxt 3の環境にVuetify 3を追加する

これはなに Link to this heading

Nuxt 3のModulesに公式のVuetify 3モジュールがないので、自力で追加したときのメモ。

環境 Link to this heading

  • Nuxt 3.4.3
  • Vuetify 3.2.4

Nuxt 3の環境作成 Link to this heading

Nuxt 3のアプリ実装環境はNuxtのドキュメント に従って作成した。

Installation · Get Started with Nuxt's image

Installation · Get Started with Nuxt

Get started with Nuxt quickly with our online starters or start locally with your terminal.

nuxt.com
npx nuxi init app
cd app
npm install
npm run dev

Vuetify 3のインストールと設定 Link to this heading

インストール Link to this heading

Vuetify本体をインストールする。

npm i vuetify

sassパッケージを入れていない場合は追加する。

npm i -D sass

プラグインの作成 Link to this heading

NuxtのプラグインとしてVuetifyを使う。 基本的には、VuetifyのManual steps に従う。

Get started with Vuetify 3 — Vuetify's image

Get started with Vuetify 3 — Vuetify

Details for v3 release - faq, changes, and upgrading.

next.vuetifyjs.com

pluginsディレクトリにvuetify.tsを作成し、以下の設定を書き込む。pluginsディレクトリがない場合は作成する。

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,
  });

  nuxtApp.vueApp.use(vuetify);
});

Vue3にはSSRが使用されているかどうかを自動的に検出する方法がない 。そのため、ssrの値は、手動でnuxt.config.tsssrと同じにする必要がある。nuxt.config.tsssrはデフォルトでtrueなので、nuxt.config.tsssrが何も設定されていないなら、plugins/vuetify.tsssrtrueにする。

'vuetify/styles'は、後述するnuxt.config.tsの修正で追加する。

ちなみに、Nuxt3では、pluginsディレクトリにプラグインファイルを作成すると、アプケーションの起動時に自動で登録してくれる。そのため、plugins/vuetify.tsを読み込むような記述は不要である。

nuxt.config.tsの修正 Link to this heading

Vuetifyを追加したことをNuxtに知らせるため、nuxt.config.tsに以下の内容を追記する。

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にこれらのライブラリをインポートしようとしないように指示する。
ES Modules · Nuxt Concepts's image

ES Modules · Nuxt Concepts

Nuxt uses native ES modules.

nuxt.com
  • cssにVuetifyのCSSファイルを指定し、読み込ませる。これは先ほどスキップした'vuetify/styles'の追加に当たる。

  • vite.ssr.noExternalにVuetifyを追加して、VuetifyがSSRのために外部化されるのを防ぐ。(ssr: trueのときに設定する)

SSR Options's image

SSR Options

Next Generation Frontend Tooling

vitejs.dev

ここまでの設定で、Vuetifyのコンポーネントは利用できるようになる。

<template>
  <div>
    <v-btn class="mx-5 my-2" color="primary" text="my-btn" />
  </div>
</template>

v-btnが正常に表示されたようす

ただし、ここまでだとアイコンボタンなどのアイコンを利用したコンポーネントは正常に処理されないため、アイコンを追加する。

アイコンの設定 Link to this heading

今回はMaterial Design Iconsを利用する。また、利用するアイコンだけ読み込む形でアイコンを設定する。基本的に公式が提示するやり方 のとおりに設定すれば問題ない。

Icon Fonts — Vuetify's image

Icon Fonts — Vuetify

Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options.

next.vuetifyjs.com

まず、plugins/vuetify.tsに、アイコンの設定を追記する。

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>

iconが正常に表示されたようす

Vuetifyに関するその他の設定 Link to this heading

長くなったので別記事にまとめた。

Nuxt 3にVuetify 3を追加した後の細かい設定のメモ's image

Nuxt 3にVuetify 3を追加した後の細かい設定のメモ

notes.nakurei.com

参考文献・URL Link to this heading

Icon Fonts — Vuetify's image

Icon Fonts — Vuetify

Vuetify supports Material Design Icons, Font awesome and other icon sets through prefixes and global options.

next.vuetifyjs.com
Vuetify3でマテリアルアイコン(mdi)を使う際のベストプラクティス's image

Vuetify3でマテリアルアイコン(mdi)を使う際のベストプラクティス

zenn.dev
Nuxt3でVuetify3の環境構築をする's image

Nuxt3でVuetify3の環境構築をする

zenn.dev
Vite+Vue3+Vuetify3+Expressのプロジェクトを1から作成する(ESLint、Prettier、Node.jsをPJに含めたモノレポ?構成) - Qiita's image

Vite+Vue3+Vuetify3+Expressのプロジェクトを1から作成する(ESLint、Prettier、Node.jsをPJに含めたモノレポ?構成) - Qiita

はじめに個人開発で使うプロジェクトをVue-CLIから移行して、Vueも3.xに上げて新しくテンプレ化してみようと思った。その新プロジェクトの作成時の手順を備忘録として残しておきたく。完成したプ…

qiita.com
Licensed under CC BY-NC-SA 4.0
最終更新 2月 03, 2024
Hugo で構築されています。
テーマ StackJimmy によって設計されています。