💭

Vuetifyのデザイン一貫性を保つ秘訣

2025/01/21に公開

何気なしにやっていること

<v-btn variant="outlined" color="deep-purple-darken-2" class="text-capitalize">ボタン1</v-btn>
<v-btn variant="outlined" color="deep-purple-darken-2" class="text-capitalize">ボタン2</v-btn>
<v-btn variant="outlined" color="deep-purple-darken-2" class="text-capitalize">ボタン3</v-btn>

同じような属性をタグ毎に毎度設定していませんか?

問題点

Vuetifyの属性を使いこなしているように思えますが、ボタンの基本デザインをコピペして貼り付けると基本デザイン変更修正を行う場合、ボタン全てに修正を行う必要があります。
数が増えていけばいくほど修正が大変になります。

前提知識

下記記事の導入方法を前提に展開します
https://zenn.dev/shunsuke_stack/articles/2e0e4b72c25615

設定ファイルを活用しよう

utils/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({
    components,
    directives,
    ssr: true,
    theme: {
      themes: {
        light: { //これはテーマの名前で、ここでは「light」という名前のテーマを定義しています。
          colors: {
            primary: 'deep-purple-darken-2',
          },
        },
      },
    },
    defaults: {
      VBtn: {
        variant: 'outlined',
        color: 'primary', // ここで初期色を設定
        class: 'text-capitalize',
      },
    },
  })

  nuxtApp.vueApp.use(vuetify)
})

設定ファイルを活用する事で下記2つのコードは全く同じ挙動になります。


<v-btn>ボタン1</v-btn>
<v-btn variant="outlined" color="deep-purple-darken-2" class="text-capitalize">ボタン2</v-btn>
...

まとめ

Vuetifyを活用する時やりがちな既存のソースをコピペして貼り付けるようなコードを書くやり方でデザインを統一するやり方が非効率な事を説明させていただきました。
設定ファイルを活用する事で統一性を保つ事、コードを見やすくする事ができます。
デザイン修正コストも格段に下がり、後にデザインの変更を行う際に腰が軽くなると思います。

GitHubで編集を提案

Discussion