Vue.js UI エコシステムの深層比較：ライブラリか、フレームワークか

Vue.js エコシステムにおいて、UI 構築をどうするかはプロジェクトの成否を分ける重要な決断です。bootstrap-vue、element-ui、quasar、vuetify はそれぞれ異なる哲学を持っており、単に「ボタンやフォームがある」という以上の違いがあります。ここでは、実務的な観点からこれらの技術的差異を解説します。

🏗️ アーキテクチャと範囲：ライブラリ vs フレームワーク

最も大きな違いは、これらが「UI ライブラリ」なのか「アプリケーションフレームワーク」なのかという点です。

bootstrap-vue と element-ui、そして vuetify は、あくまで UI コンポーネントの集合体です。これらは既存の Vue プロジェクトにインストールして、必要な部品として使います。ビルド設定やルーティングは開発者が別途決める必要があります。

// bootstrap-vue: Vue インスタンスにプラグインとして登録
import { BootstrapVue } from 'bootstrap-vue'
Vue.use(BootstrapVue)

// element-ui: 同様にプラグイン登録
import ElementUI from 'element-ui'
Vue.use(ElementUI)

// vuetify: プラグイン登録とスタイルの注入
import Vuetify from 'vuetify'
Vue.use(Vuetify)

一方、quasar はフレームワークです。CLI を経由してプロジェクトを生成し、ビルド設定、ルーティング、状態管理、そして UI コンポーネントまでを一貫して提供します。Web だけでなく、モバイルやデスクトップアプリへのビルドもコマンド一つで切り替えられます。

# quasar: CLI を通じてプロジェクト全体を管理
npm install -g @quasar/cli
quasar create my-app

# 開発モードの切り替え（Web, Mobile, Electron）
quasar dev -m electron
quasar dev -m cordova

🔄 Vue バージョン対応と将来性

アーキテクチャ選定において、Vue 2 と Vue 3 の対応状況は避けて通れない問題です。

bootstrap-vue と element-ui は、主に Vue 2 向けに設計されています。Vue 3 での使用は公式にサポートされておらず、新規プロジェクトでこれらを選ぶことは技術的負債を生むリスクがあります。

<!-- bootstrap-vue (Vue 2 専用) -->
<template>
  <b-button variant="primary">Click</b-button>
</template>

<!-- element-ui (Vue 2 専用) -->
<template>
  <el-button type="primary">Click</el-button>
</template>

対照的に、quasar (v2 以降) と vuetify (v3 以降) は Vue 3 を正式にサポートしています。Composition API や <script setup> 構文も自然に扱えます。

<!-- quasar (Vue 3 対応) -->
<template>
  <q-btn label="Click" color="primary" />
</template>
<script setup>
// Composition API がそのまま使える
</script>

<!-- vuetify (Vue 3 対応) -->
<template>
  <v-btn color="primary">Click</v-btn>
</template>
<script setup>
// Vue 3 の機能がフル活用可能
</script>

🎨 デザインシステムとカスタマイズ

各パッケージは固有のデザイン言語を持っています。これがアプリケーションの外観に直結します。

bootstrap-vue は Web で最も普及している Bootstrap CSS に依存します。Web 開発の経験があるチームにとって学習コストが最も低いです。カスタマイズは SCSS 変数を通じて行います。

// bootstrap-vue: Bootstrap の SCSS 変数を上書き
$primary: #007bff;
$font-size-base: 1rem;
@import '~bootstrap/scss/bootstrap';

element-ui はクリーンで白を基調としたデザインで、管理画面などでよく見られます。テーマカスタマイズには専用のツールや変数の上書きが必要です。

// element-ui: テーマ変数の上書き
$--color-primary: #409EFF;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

vuetify は Google の Material Design を厳格に実装しています。コンポーネントが豊富ですが、Material Design 特有の見た目（影、アニメーション）から逃れるには追加の設定が必要です。

// vuetify: テーマ設定オブジェクト
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#1976D2',
        secondary: '#424242',
      },
    },
  },
})

quasar は Material Design に基づきつつも、独自のカスタマイズ性が強く、iOS (Cupertino) や Material などテーマを切り替える機能も持っています。

// quasar: quasar.config.js でテーマ設定
module.exports = function (ctx) {
  return {
    framework: {
      config: {
        brand: {
          primary: '#1976D2'
        }
      }
    }
  }
}

🧩 コンポーネントの実装比較

同じ機能を実装する際のコード記述量の違いも重要です。ここでは「ローディング状態を持つボタン」を例に比較します。

bootstrap-vue では、状態管理を自分で実装する必要があります。

<template>
  <b-button :disabled="loading" @click="handleClick">
    {{ loading ? 'Loading...' : 'Submit' }}
  </b-button>
</template>
<script>
export default {
  data() { return { loading: false } },
  methods: {
    handleClick() {
      this.loading = true
      // API call...
    }
  }
}
</script>

element-ui も同様に、ローディングプロパティが用意されています。

<template>
  <el-button :loading="loading" type="primary" @click="handleClick">
    Submit
  </el-button>
</template>
<script>
export default {
  data() { return { loading: false } },
  methods: {
    handleClick() {
      this.loading = true
      // API call...
    }
  }
}
</script>

vuetify は、ローディング状態をプロパティで制御できます。

<template>
  <v-btn :loading="loading" color="primary" @click="handleClick">
    Submit
  </v-btn>
</template>
<script setup>
import { ref } from 'vue'
const loading = ref(false)
const handleClick = () => {
  loading.value = true
  // API call...
}
</script>

quasar は、ローディングだけでなく、プログレス表示などもコンポーネント内に統合されています。

<template>
  <q-btn :loading="loading" color="primary" label="Submit" @click="handleClick">
    <template v-slot:loading>
      <q-spinner-facebook />
    </template>
  </q-btn>
</template>
<script setup>
import { ref } from 'vue'
const loading = ref(false)
const handleClick = () => {
  loading.value = true
  // API call...
}
</script>

🛠️ エコシステムとツールing

開発体験（DX）を支えるツールの充実度も選定基準になります。

• bootstrap-vue: 公式の CLI はありません。Vue CLI や Vite を自分で設定する必要があります。
• element-ui: 同様に、ビルドツールは開発者任せです。
• vuetify: vuetify-cli が存在し、プロジェクトのスケルトン生成やテーマ生成を支援します。
• quasar: quasar-cli が非常に強力です。アイコンの最適化、PWA 設定、ビルドターゲットの切り替えなど、本番環境に必要な設定の多くを自動化します。

📊 比較サマリー

💡 結論：どの道を選ぶべきか

bootstrap-vue と element-ui は、Vue 2 の資産を活かす場合を除き、新規プロジェクトでの採用は避けるべきです。特に Vue 3 を使う場合、これらは技術的な制約になります。

vuetify は、Material Design の美しさと一貫性を求める Web アプリケーションに最適です。コンポーネントが豊富で、見栄えの良いアプリを早く作れます。

quasar は、単なる Web サイトを超えて、モバイルアプリやデスクトップアプリへの展開を視野に入れる場合に真価を発揮します。設定の手間を省き、機能面に集中したいチームにとって、最も生産性の高い選択肢となります。

最終的には、プロジェクトが「Web 専用」なのか「マルチプラットフォーム」なのか、そして「Vue 3 ベース」なのかで絞り込むのが賢明です。