Vue でアプリ作る時に便利な Vuetify

Vue で Web アプリケーションを作ろうと思ってるんですが、CSS は不得手なものでそこに時間をかけるよりは UI フレームワークを活用した方が挫折が少なそうなので、Vuetify をチョイスしました。ボタン等の細かな UI コンポーネントはもちろんのこと、ツールバー、フッターやツリービューまで用意されてます。vue ファイルの template 部分でコンポーネント名を指定したタグを書くだけで適用できるので非常にサクッとイマドキのデザインが適用できちゃいます。

Vuetify のテーマカラーを設定したい

そんな便利な Vuetify ですが、既存のカラーではなく、アプリ独自のテーマカラーを適用したくなってきます。テーマカラーを検討する上で便利そうなツールがあったので試してみました。それが Vuetify Theme Generator です。

ページ内で表示されているカラーを、primary、secondary、accent、error、warning、info、success の7つ指定することで、テーマ指定用の JSON データ・コードが出力されます。

カラーの指定は簡単だけどハマりポイントがある

この出力されたデータをそのまま使えばいいかと思いきや、そのまま利用できない残念な部分があったので記録しておきます。

HexCode の罠

デフォルトで表示される HexCode 版のコードですが、以下の様に出力されます。

{
primary: #673ab7,
secondary: #cddc39,
accent: #e91e63,
error: #f44336,
warning: #9c27b0,
info: #03a9f4,
success: #3f51b5
}

ただ、実際にコード内でカラーを指定する場合は、16進数のカラーコード部分を文字列にする必要があるので、

{
primary: ‘#673ab7’,
secondary: ‘#cddc39’,
accent: ‘#e91e63’,
error: ‘#f44336’,
warning: ‘#9c27b0’,
info: ‘#03a9f4’,
success: ‘#3f51b5’
}

という形で出力されてほしいなぁ。

カラーネーム指定の罠

Hex 指定をせずに、Vuetify で指定できるカラーネームを指定する形式でも出力が可能です。ただ、こちらも少し問題を抱えている様です。

import colors from ‘vuetify/es5/util/colors’
{
primary: colors.deep-purple.base,
secondary: colors.lime.base,
accent: colors.pink.base,
error: colors.red.base,
warning: colors.purple.base,
info: colors.light-blue.base,
success: colors.indigo.base
}

通常は、これを theme.js として保存し、Vue.use を書いているコード（/src/plugins/vuetify.js など）で読み込みするのですが、上記のコードをそのまま読み込むとエラーが出ます。
内容を確認する限り、「colors.deep-purple.base なんて定義は存在しねぇよ」という事の様です。import で指定されている vuetify/es5/util/colors を確認すると確かにその様な定義はなく、「colors.deepPurple.base」が正解でした。他にも定義が異なるカラーがあるのでその部分は修正が必要な様です。

まとめ

ちょっと使ってみた感じでは Vuetify Theme Generator は、新しい Vuetify の定義と乖離があったり、微修正が必要だったりするので「非常に便利」とは言い辛い状態ではあります。サイト内でアプリのテーマ適用イメージを確認できる点は良いですが、メインカラーの２色以外のエラー・インフォメーション・成功などのカラーもプレビューできないと利用する必要性はちょっと下がるなぁ、という印象でした。