Vuetifyを部分的に使う方法

この記事は

Vuetifyを一部のコンポーネントのみ使用する方法を記録したものです。
vue-cliを用いている前提です。

背景

私はbootstrapにトラウマがあります。

それはなぜかというと、
最初はbootstrapに則ったデザインでいいと言われたのに
徐々に細かい修正指示が入り、
CSSにたくさんの!importantをつけなければいけない、
という事象があったからです。

なので私は極力CSSフレームワークを使いたくない。

しかし、開発速度やデザインの統一の関係で
どうしてもVuetifyを使わなければいけないタイミングが来ました。

じゃあ、せめて他のコンポーネントに影響を及ぼさない、
部分的な使用方法はないのか、と探し始めたのが
この記事の背景です。

手順

vuetifyをインストール

vue add vuetify

生成された src/plugins/vuetify を編集

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

main.ts を編集

import Vue from 'vue'
import vuetify from '@/plugins/vuetify'

new Vue({
  vuetify,
}).$mount('#app')

vue.config.js を編集

chainWebpack: config => {
  config.plugin('VuetifyLoaderPlugin').tap(args => [{
    match (originalTag, { kebabTag, camelTag, path, component }) {
      if (kebabTag.startsWith('core-')) {
        return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
      }
    }
  }])
}

使いたいVuetifyコンポーネントを呼び出す

<template>
  <v-card>
      ...
  </v-card>
</template>

<script>
  import { VCard } from 'vuetify/lib'

  export default {
    components: {
      VCard
    },
    ...
  }
</script>

ビルド速度を削減（任意）

アラカルトによりビルドが重くなるようなので、気になる方は対処するといいかも
Vuetify2を使ったプロジェクトのビルドが遅いので高速化する - Qiita

参考