以前紹介した Vue3 で Bootstrap 5 を使う方法ですが、 Bootstrap 5 ではそれまでのバージョンに比べ結構実装方法が異なっているため、ドロップダウンを使うために一手間必要になります。今回は、 Bootstrap 5 でドロップダウンを実装する方法について紹介します。

Bootstrap 5 を有効にしただけではドロップダウンが動かない

まずは以前紹介した方法で Bootstrap 5 を有効にし、公式サイトからサンプルコードを貼付け実行してみます。

main.js

import { createApp } from 'vue'
import App from './App.vue'

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

createApp(App).mount('#app')

App.vue

<template>
  <div>
    <BSDropdown />
  </div>
</template>

<script>
import BSDropdown from "./components/BSDropdown.vue";

export default {
  name: "App",
  components: {
    BSDropdown,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

components / BSDropdown.vue

<template>
  <div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</template>

上記コードの内容で実行すると、以下のように Bootstrap のドロップダウンがエラーなく表示されるのですが、クリックしても何も動作することはありません。

Bootstrap 5 におけるドロップダウンでは Popper が必要

公式ドキュメントをきちんと読むと、以下の説明を見つけることができます。

ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されており、動的なポジショニングとビューポート検出を提供しています。必ずBootstrapのJavaScriptの前にpopper.min.jsをインクルードするか、Popper.jsを含むbootstrap.bundle.min.js / bootstrap.bundle.jsを使用してください。
https://getbootstrap.jp/docs/5.0/components/dropdowns/

どうやら、 Popper を活用する必要があるようです。

Popper について

[ads]

Popper は、簡潔に言うと「ツールチップとポップオーバーに関連するもの」です。

Given an element, such as a button, and a tooltip element describing it, Popper will automatically put the tooltip in the right place near the button.
https://www.npmjs.com/package/@popperjs/core

「ボタン等のエレメントと、記載されたツールチップがあると、 Popper は自動的にそのボタンの近くの適切な場所にツールチップを配置します」というような紹介文が掲載されています。百聞は一見にしかず、ということで公式サイトにデモが掲載されていますので、そちらを見ていただくと良いと思います。

現状は Popper 2 がメインストリームのようなので、まずはこちらをインストールすることことからはじめます。

Popper 2 のインストール

[ads]

公式サイトの手順に従ってすすめていきます。

% npm i @popperjs/core

package.json の内容をみていきます。今回は、以下のようなバージョンでインストールすることができました。

main.js で Bootstrap bundle をインポート

[ads]

次に、公式ドキュメントで言及されている通り、 popper を利用可能にしていきます。今回は、 main.js に bootstrap.bundle.min.js をインポートする方法で進めていきます。

main.js

import { createApp } from 'vue'
import App from './App.vue'

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.bundle.min.js"

createApp(App).mount('#app')