Nuxt 3 で Vuetify を使う方法

Vuetify とは？

2014 年の最初のリリース以来、Vue.js は、世界で最も人気のある JavaScript フレームワークの 1 つに成長しました。この人気の理由の 1 つは、コンポーネントが幅広く使用されていることです。

これにより、開発者はアプリケーション全体で使用および再利用できる小さなモジュールを作成できます。Vuetify は、動的なテーマなどの強力な機能と組み合わせた既製のコンポーネントのコレクションです。dynamic themes, global defaults, application layouts など多数。

その目標は、豊かで魅力的なユーザー エクスペリエンスを構築するために必要なツールをすべて開発者に提供することです。

– Why you should be using Vuetify — Vuetify より

Nuxt 2 時代はインストール時のプリセットで Vuetify が選択でき、インストールやら何やらを全部やってくれていたのですが、
Nuxt 3 からインストーラの方針が変わってしまい、自分でセットアップしてくれ方式になりました。

ちょっとめんどくさくなったので悲しいです。

インストール

Nuxt 3 のプロジェクトをまだ作成していない場合は、作成します。

$ npx nuxi init nuxt3-vuetify

次に、cd nuxt3-vuetify を実行し、作業ディレクトリに移動したあと、yarn install して依存関係をインストールします。

これで Nuxt 3 の開発環境が整ったので、Vuetify と依存関係である sass をインストールします。

$ yarn add vuetify sass

インストールが完了すると、package.json は以下のようになっています。

"devDependencies": {
  "nuxt": "3.5.0"
},
"dependencies": {
  "sass": "^1.62.1",
  "vuetify": "^3.3.2"
}

プラグインの作成

ライブラリをインストールしただけでは Vuetify を認識してくれません。プラグインを作る必要があります。なお、プラグイン機能は Nuxt に公式で搭載されています。

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

これは Vuetify の Docs に書いてあるものをちょっと改変しただけのコードです (こういうことができるから Nuxt は便利)

Nuxt の config を編集する

このままだとVuetify の CSS が適用されず、見た目が悲しいことになります。

CSS を適用させるには、Vuetify の CSS を config に指定する必要があります。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
});

これで CSS が適用されました。

mdi を追加する

このままだと、アイコンフォントが表示されません。

materialdesignicons が公式で提供している @mdi/fonts を追加して、フォントが表示されるようにします。

これもまた、config で CSS を指定する必要があります。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.min.css',
  ],
  build: {
    transpile: ['vuetify'],
  },
});

以上

これで完璧に Vuetify が使用できるようになりました。