Vue.js 3 で Select2 をラップした SFC その3 。 Select2 に Bootstrap 4 のテーマを適用する

まとめ

• select2-theme-bootstrap4 パッケージを追加する。
• SASS の laravel/resources/sass/app.scss で select2-theme-bootstrap4/dist/select2-bootstrap.min.css を読み込む。
• Select2 の初期設定で、 theme: "bootstrap" とする。

コード

短いですので差分を一気に全部示します。

• npm install --save-dev select2-theme-bootstrap4 で追加した。
• テーマ適用前後でウェブページを比較することで違いは分かったが、大きな違いではなかった。他の Bootstrap 4 のパーツの中に入れたならば、もっと自然に見えるのかもしれない。

$ git diff
diff --git a/laravel/package-lock.json b/laravel/package-lock.json
index 8d64445..455da26 100644
--- a/laravel/package-lock.json
+++ b/laravel/package-lock.json
@@ -9363,6 +9363,12 @@
             "integrity": "sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A==",
             "dev": true
         },
+        "select2-theme-bootstrap4": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/select2-theme-bootstrap4/-/select2-theme-bootstrap4-1.0.0.tgz",
+            "integrity": "sha512-WJH1GMnHir+/EnW7ANZq2VfmRGXWNEySPULQ+zCcVRyVs3B1qyLZ0XFflZNo1FlbxYxBsIQH6QsqnNEyNudU1g==",
+            "dev": true
+        },
         "selfsigned": {
             "version": "1.10.8",
             "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
diff --git a/laravel/package.json b/laravel/package.json
index 4c9bc77..89c9726 100644
--- a/laravel/package.json
+++ b/laravel/package.json
@@ -30,6 +30,7 @@
         "sass": "^1.32.11",
         "sass-loader": "^8.0.0",
         "select2": "^4.1.0-rc.0",
+        "select2-theme-bootstrap4": "^1.0.0",
         "vue": "^3.0.11",
         "vue-loader": "^16.2.0",
         "vue-router": "^4.0.6",
diff --git a/laravel/resources/js/components/BaseSelect2.vue b/laravel/resources/js/components/BaseSelect2.vue
index 0402703..9a0e5fb 100644
--- a/laravel/resources/js/components/BaseSelect2.vue
+++ b/laravel/resources/js/components/BaseSelect2.vue
@@ -47,7 +47,10 @@ export default {
     );

     onMounted(() => {
-      const config = { data: props.options };
+      const config = {
+        data: props.options,
+        theme: "bootstrap",
+      };
       if (props.match) {
         config.matcher = props.match;
       }
diff --git a/laravel/resources/sass/app.scss b/laravel/resources/sass/app.scss
index 198f32a..9f0bf87 100644
--- a/laravel/resources/sass/app.scss
+++ b/laravel/resources/sass/app.scss
@@ -12,3 +12,4 @@

 // Select2
 @import "~select2/dist/css/select2.min.css";
+@import "~select2-theme-bootstrap4/dist/select2-bootstrap.min.css";
$

おわりに

今回の投稿は Select2 、選択肢文字列以外の文字列 (ひらがなアルファベットなど) で絞り込む方法 (ちなみに Laravel 6 、 Vue.js 3 の環境) – oki2a24 の続きとなります。

日本語化も並行して進めていたのですけれども、こちらはうまくいっておりません。

以上です。