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

Vue.js 3 に組み込んだ Bootstrap 5 をカスタマイズできるようにする方法

カスタマイズ導入方法まとめ

  • Vue.js 3 に Bootstrap 5 を組込む手順メモ – oki2a24 の続きであることが前提。
  • yarn add sass-loader@^10 sass で依存パッケージをインストールします。ここで @^10 とバージョンを指定しているのは、最新版をインストールするとビルド時にエラーが発生したため。公式ドキュメントにも注釈がある。→ Working with CSS | Vue CLI
  • src/scss/custom.scss を作成し、 @import "node_modules/bootstrap/scss/bootstrap"; を記述する。カスタマイズ内容は、この行よりも上に書くこと。
  • src/main.jsimport "@/scss/custom.scss"; を記述し custom.scss を読み込む。今まで読み込んできた素の Bootstrap である import "bootstrap/dist/css/bootstrap.min.css"; 行は不要となるので削除する。
カテゴリー
コンピューター

Vue.js 3 に Bootstrap 5 を組込む手順メモ

まとめ

  • yarn add bootstrap@next @popperjs/core
  • src/main.js に次を追加する。
    import "bootstrap";
    import "bootstrap/dist/css/bootstrap.min.css";
    
カテゴリー
コンピューター

Vue.js 、例えば検索を実行して同ページに結果を表示する時に、検索条件を URL クエリ引数に反映させたい。その方法

こんなケースを想定してみる

ページの検索フォームに入力して検索ボタンをクリックすると AJAX で検索用 API を実行する。この時に、検索パラメータを URL のクエリパラメータとして URL へ反映することはできるのか?

また、ブラウザでの戻る、進むをクリックした時も、検索結果をページに表示するのはもちろん、 URL クエリ引数や検索フォームに検索キーワードを反映させたい。

実装方法まとめ

以下、 Vue.js 2 (Options API) での勘所です。 Compotision API でもポイントは同じで、メソッドを適宜置き換えてください。どちらの実装例も本記事にあるので、具体例を参考にするのも、良いと思います。

  • ページ初回表示時は created メソッド内でリソースサーバからデータ取得を行う。
  • 検索ボタンをクリックしたら自分のページへ URL クエリ引数つきで Vue Router の push を行う。例えば this.$router.push({ name: "AboutA, query: { base: "JPY" } }) となる。これにより beforeRouteUpdate メソッドが実行され、ここでリソースサーバからデータ取得を行う。
  • リソースサーバからデータ取得を行う処理 (メソッド) では次を気をつけると良い。
    • 引数として、クエリパラメータを受け取る。
    • メインの処理 (リソースサーバからのデータ取得) 以外に、検索フォームへ対応する URL クエリ引数の値を設定する、などの処理を行う。

読むべき公式ページ

これらの Vue Router の公式ページをしっかりと読み込んで理解できれば、本ページでやりたいことは実現できました。

コード例