Vue

概要 プログレスバーを簡単に実装できる vue-progressbar ライブラリを使って再利用可能なプログレスバーを表示するコンポーネントを作ります。 プロジェクトの作成 VueCLI の...

概要 Semantic UI Vueの Dropdown コンポーネントを使っていたとき、イベントハンドラの付け方が分からず手間取ってしまったので備忘録としてまとめています。 v-model を使...

概要 テキストファイルをそのまま文字列として import するにはどうすればいいかを書いています。 import 文に直接書く方法と、vue.config.js に追記す...

概要 React 公式のチュートリアルで紹介されている三目並べゲームを Vue.js で作ってみます。 スターターコードを用意する チュートリアルではスターターコードが用...

概要 Vuetify は Vue.js 用のコンポーネントフレームワークです。 今回はこの Vuetify のテキストフィールドを含むコンポーネントのユニットテストの書き方について紹介しま...

概要 外部から取り込んだ CSV ファイルを JSON に変換して表示させる Vue コンポーネントの実装例です。 コンポーネントのコード <template> <div> <input type="file" @input="handle" /> <div>{{ data }}</div> </div> </template> <script> export default { data()...

概要 グラフ表示ライブラリ Plotly.js のラッパーコンポーネントである vue-plotly を使って時系列データをグラフに表示させます。 プロジェクトのセットアップ VueCLI でプロジェ...

概要 BootstrapVue のモーダル内で VueLeaflet を使うと、表示崩れが起きてしまいます。 以下では普通に実装したときの失敗例と、そうならないよう対策した成功例を載せていま...

概要 Vue.js で CSV ファイルからデータを読み込みしたい場合の一例。 サンプルの CSV を用意 以下のような CSV ファイルを src フォルダ配下の assets/data.csv に配置します。 id,first name,last name,age 1,taro,tanaka,20 2,jiro,suzuki,18...