カテゴリー
コンピューター

Laravel 6 に構築した Vue.js 3 SPA で、 Bootstrap 4 のモーダルをラッパー SFC (シングルファイルコンポーネント) 化した例

はじめる前に

本投稿は時系列としては Laravel 6 、 Vue.js 3 の SPA で npm run production が失敗する問題を修正する – oki2a24 の続きとなります。

作ったものの構成

  • モーダルを呼び出すページを用意する。
  • モーダルに表示するコンテンツ部分を 1 つの別のコンポーネントとして作成する。このモーダルコンテンツコンポーネントから、基底となるモーダルコンポーネントを呼び出す。
  • モーダルの外側を 1 つのコンポーネントとして作成する。基底モーダルコンポーネントと呼ぶ。ここが Bootstrap 4 のモーダルをラップした部分。

使うときのポイント

  • モーダルがマウントされるのは、モーダル呼び出し元のページがマウントされる時と同じタイミングとなる点に注意。モーダル表示のタイミングで実行したいことがあるならば、モーダルのイベントを使う必要がある。
  • モーダル SFC を使うコンテンツコンポーネントで設定した HTML の id は props で与えないような構造としてしまってもよいと思った。ただし、そうするとモーダルを呼び出す側がコンテンツコンポーネントの内部に書かれている HTML id を調べに行く必要が出てくるので、やりづらさを感じる。
カテゴリー
コンピューター

Laravel 6 の Vue.js 3 でラップしてコンポーネント化した Select2 に Bootstrap 4 のテーマを適用する

まとめ

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

Laravel 5.5 で Laravel Mix での設定で Bootstrap 4 を使えるようにする

まとめ

  • Laravel 5.5 の package.json には、 "bootstrap-sass": "^3.3.7" とあり、 Bootstrap のバージョンが 3 である。これを 4 にした。
  • bootstrap-sass のバージョン 4 はなく、 単純な Bootstrap 4 を指定することからか、 package.json 以外の次のファイルの修正が必要となった。
    • resources/assets/js/bootstrap.js
    • resources/assets/sass/_variables.scss
    • resources/assets/sass/app.scss