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

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 の公式ページをしっかりと読み込んで理解できれば、本ページでやりたいことは実現できました。

コード例

カテゴリー
Linux

Vue.js のお試し開発環境を構築するシンプルな Docker Compose を用意した

はじめに

以前、 Dockerfile を書かないで docker-compose.yml だけで Node.js 開発環境を用意する方法 にて Node.js のシンプルな開発環境を docker-compose.yml を使用して構築しました。

今回、 Vue.js を使ったアプリをお試しで作りたいです。この時、前回だけでは環境が足りませんでしたので、ノートいたします。

カテゴリー
Linux

Dockerfile を書かないで docker-compose.yml だけで Node.js 開発環境を用意する方法

はじめに

ちょっとお試しで Vue Material Design Component Framework — Vuetify.js に入門したいと思いました。

この時、 Docker を使って開発環境を用意しようと思いましたけれども、最初は Dockerfile を使ってあれこれチューニングすることなく、シンプルに始めたかったのです。

そのために少し調べるような手間が発生しましたので、今後のためにメモしておきます。

カテゴリー
Linux

『Vue.js入門 基礎から実践アプリケーション開発まで』 10.2 コンポーネントの実装 に取り掛かる前に実行した npm run unit の結果がわからない

わからない

  • このまま進めていってよいのか、わからない
  • レポートの読み方が、わからない 
カテゴリー
Linux

『Vue.js入門 基礎から実践アプリケーション開発まで』 8.8.7 単体テストユーティリティの導入 ● Vue Test Utilsによる効率化、の PhantomJS が動かなかったので ChromeHeadless で動くようにした記録

はじめに

  • 『Vue.js入門 基礎から実践アプリケーション開発まで』
    • 8.8.7 単体テストユーティリティの導入
      • ● Vue Test Utilsによる効率化

単体テストコードの編集が完了したら動作確認のため、 npm run unit で単体テストを実行しましょう。

実行しましたら、動きませんでした><。修正内容をノートいたします。

カテゴリー
Linux

Dokcer 環境で、vue init したプロジェクトで npm run dev したときにウェブブラウザから確認するときにできず、ハマった問題を解決した方法

解決方法

  • host を localhost から 0.0.0.0 へと修正する。

config/index.js

     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,