Nuxt.jsで使えるUIフレームワーク Vuetifyの導入方法とカスタマイズ

今回はVuetifyの導入方法とカスタマイズ方法についてご紹介します。

Vuetifyとは？

Vuetifyとは、Vue.jsで使用できるマテリアルデザインのUIフレームワークです。
レイアウトを構築するグリッドシステムやボタンなどの細かいパーツなど幅広くUIが用意されています。
デザインの知識がなくても、簡単にUIを作ることができるため非常に便利なフレームワークです。

Nuxtプロジェクト作成時に導入

新規でNuxtのプロジェクトを作成する際にVuetifyの導入が決まっている場合は、
create-nuxt-app コマンド時に Choose UI frameworkの項目で Vuetify を選択します。

Nuxtプロジェクトの途中で導入

プロジェクトの途中でVuetifyを使用したいという場合は以下の手順でインストールしていきます。

ライブラリのインストール

yarn add --dev @nuxtjs/vuetify

nuxt.config.jsに追記

{
  buildModules: [
    '@nuxtjs/vuetify',
  ]
}

Vuetifyのカスタマイズ方法

Vuetifyを使っている時にサイトのフォントを変えたり、ボタンのサイズなどを変更したい場面があると思います。
VuetifyにはSASS変数が用意されており、そのSASS変数をカスタマイズすることが出来るようになっています。
そのカスタマイズ方法についてご紹介します。

SCSSファイルの作成

SASS変数上書き用のSCSSファイルを作成します。
SASSファイルには以下のようにカスタマイズしたいSASS変数を追加していきます。

assets/scss/variables.scss

// Globals
$body-font-family: "メイリオ" , Meiryo , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "ＭＳ Ｐゴシック" , "MS PGothic", arial, helvetica, sans-serif;

// color
$grey: (
  'base': #c7c7c7,
);
$blue: (
  'base': #3879d9,
);
$light-blue: (
  'base': #00b4ff,
);

// btn
$btn-font-weight: bold;
$btn-sizes: (
  'default': 45,
  'large': 50,
  'x-large': 60
);
$btn-font-sizes: (
  'default': .15px,
  'large': 16px,
  'x-large': 17px
);

nuxt.config.jsでスタイルシート読み込み

最後にnuxt.config.jsで作成したスタイルシートのパスを追記します。
treeShakeはデフォルトでは本番環境のみ有効になりますが、開発環境でもカスタマイズを有効にするためにtrueを選択します。

nuxt.config.js

// VuetifyのSASS変数上書き用のスタイルシート読み込み
vuetify: {
  treeShake: true,
  customVariables: ['~/assets/scss/variables.scss'],
},

これでVuetifyのカスタムができるようになりました。