VuetifyでRedmineのダッシュボードを作成する時にテーマをこんな感じにすると便利かもというお話

Vue.jsとVuetifyを勉強中の8amjpです。

はじめに

さて、私の職場ではRedmineが稼働してまして、さらにそのデータを見やすく加工したダッシュボードを作成して、大型ディスプレイに表示してるんですけど。
そのダッシュボード、今まではAngularで作ってたんですが、Vue.jsも勉強したいしVuetifyでマテリアルデザインを満喫したいし……ということで、現在リプレースの真っ最中です。Vue.jsもたのしー！
その過程で覚えた小ネタをひとつ。

テーマにカスタムカラーを追加する

Vuetifyとは、Vue.jsベースのフレームワークで、ダッシュボードみたいなWebアプリを作るのに最適なんですけど。
このVuetify、「テーマ」という機能を持っていて、これがRedmineのデータの表示にとても便利なんです。
具体的に言うと……
チケットの一覧なんかを表示する際、チケットのステータスやトラッカーの値によって色を変えたい……ってこと、良くあるじゃないですか。
そんな時、「tracker1」とか「status1」なんていう名前のカスタムカラーを簡単に追加できます。
こんな感じで、plugins/vuetify.jsを編集しましょう。

plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors'; // 追加

Vue.use(Vuetify);

export default new Vuetify({
  theme: { // 追加
    themes: {
      light: {
        // トラッカー
        tracker1: colors.red.base, // バグ
        tracker2: colors.amber.base, // 機能
        tracker3: colors.blue.base, // サポート
        // ステータス
        status1: colors.red.accent1, // 新規
        status2: colors.blue.lighten5, // 進行中
        status3: colors.green.lighten5, // 解決
        status4: colors.amber.lighten5, // フィードバック
        status5: colors.grey.lighten1, // 終了
        status6: colors.grey.lighten1, // 対応中
      }
    }
  },
});

で、コンポーネント側ではこんな感じでカラーを指定します。

Hoge.vue

<v-list-item :class="'status'+issue.status.id">
  <v-list-item-title>
    <v-chip dark v-text="'#'+issue.id" :color="'tracker'+issue.tracker.id"/>
    {{issue.subject}}
  </v-list-item-title>
</v-list-item>

こんな感じで、ステータスやトラッカーの値に応じた色を簡単に適用できますよ。
今までは似たような事をSassで定義してたんですけど、断然こっちの方が手軽ですねー。とっても便利。