Vue 3でBootstrap 5を使用する方法

問題点

Vue 3プロジェクトでBootstrap 5を使用したい場合、jQueryに依存しないBootstrap 5を直接使用できるかどうか、そしてその実装方法について理解が必要です。Bootstrap-Vueのような専用ライブラリを使用せずに、Bootstrap 5をVue 3と統合する方法について説明します。

ソリューション

基本インストール

まず、Bootstrapとその依存関係であるPopper.jsをインストールします。

bash

npm install --save bootstrap @popperjs/core

Vueエントリーポイントでのインポート

main.jsまたはmain.tsファイルでBootstrapのCSSとJavaScriptをインポートします。

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

基本的な使用方法

BootstrapのCSSクラスを直接使用してコンポーネントを作成できます。

vue

<template>
  <div class="container">
    <h1 class="text-center my-5">Vue 3とBootstrap 5の統合</h1>
    <button type="button" class="btn btn-primary">プライマリーボタン</button>
    
    <div class="dropdown">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton1"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        ドロップダウン
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">アクション</a></li>
        <li><a class="dropdown-item" href="#">別のアクション</a></li>
        <li><a class="dropdown-item" href="#">その他</a></li>
      </ul>
    </div>
  </div>
</template>

重要な注意点

公式Bootstrapドキュメントでは、React、Vue、AngularなどのJavaScriptフレームワークでは、BootstrapのJavaScript機能が完全に互換性があるわけではないと説明されています。両方が同じDOM要素を変更しようとすると、ドロップダウンが「開いた」状態で固まるなどのバグが発生する可能性があります。

データ属性の変更点

Bootstrap 5では、データ属性に -bs- 接頭辞が追加されました。Bootstrap 4から移行する場合は、データ属性を更新する必要があります。

Bootstrap 4:

html

<a href="#" data-toggle="collapse" data-target="#collapseExample">
  クリックで折りたたみ
</a>

Bootstrap 5:

html

<a href="#" data-bs-toggle="collapse" data-bs-target="#collapseExample">
  クリックで折りたたみ
</a>

Vueコンポーネントとしてのラップ

BootstrapコンポーネントをVueコンポーネントとしてラップする方法：

vue

<template>
  <button 
    class="btn btn-primary" 
    data-bs-target="#collapseTarget" 
    data-bs-toggle="collapse">
    Bootstrap折りたたみ
  </button>
  <div class="collapse py-2" id="collapseTarget">
    これはトグル可能なコンテンツです！
  </div>
</template>

モーダルの実装例

VueでBootstrapモーダルを制御する例：

vue

<template>
  <div>
    <button type="button" class="btn btn-primary" @click="modalToggle">
      モーダルを開く
    </button>
    
    <div
      ref="modal"
      class="modal fade"
      :class="{ show: active, 'd-block': active }"
      tabindex="-1"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">モーダルタイトル</h5>
            <button
              type="button"
              class="btn-close"
              @click="modalToggle"
            ></button>
          </div>
          <div class="modal-body">
            <p>モーダルの本文です。</p>
          </div>
        </div>
      </div>
    </div>
    
    <div v-if="active" class="modal-backdrop fade show"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: false,
    }
  },
  methods: {
    modalToggle() {
      const body = document.querySelector("body")
      this.active = !this.active
      this.active ? body.classList.add("modal-open") : body.classList.remove("modal-open")
    },
  },
}
</script>

プロダクション環境での考慮事項

大規模なアプリケーションでは、BootstrapのJavaScriptとVueのDOM操作が競合する可能性があります。このような場合は、BootstrapVueのVue 3対応版を待つか、または個々のBootstrapコンポーネントをVueコンポーネントとして慎重にラップすることを検討してください。

まとめ

Bootstrap 5はVue 3で直接使用できますが、JavaScriptのインタラクティブなコンポーネントについては注意が必要です。CSSフレームワークとして使用する場合は問題ありませんが、高度なインタラクションが必要な場合は、公式のVue統合ソリューションを検討するか、コンポーネントを適切にラップすることをお勧めします。

関連記事

Vue 3でBootstrap 5を使用する方法 ​

問題点 ​

ソリューション ​

基本インストール ​

Vueエントリーポイントでのインポート ​

基本的な使用方法 ​

データ属性の変更点 ​

Vueコンポーネントとしてのラップ ​

モーダルの実装例 ​

まとめ ​