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 が使用できるようになりました。
コメント