2023年4月23日 / 最終更新日時 : 2023年4月27日 admin Vue.js（主にNuxt.jsとVuetify）

vee-validateにカスタムバリデーションを追加して使用有無を制御する

APIでは不正値が保存されないように必ずバリデーションを掛けますが、フロントは任意。でも、あった方がユーザーが入力段階で気付けるのと、無駄なAPIリクエストを抑制できる。フロントだけで完結できるものは追加した方が、親 […]

2023年1月31日 / 最終更新日時 : 2023年2月1日 admin Vue.js（主にNuxt.jsとVuetify）

既存のRails環境でNuxt.js(CSR)を動かす（URL直打ちすると404になる件の対応）

既存サイトのフロントとAPIの分離を目的にNuxt.js（CSR）を導入しました。ドメインやインフラは変えずにRailsが動いている環境で動かしたい。簡単なのはRailsのpublicにgenerateで作成したHT […]

2022年11月10日 / 最終更新日時 : 2022年11月10日 admin Vue.js（主にNuxt.jsとVuetify）

IndexedDBはブラウザにデータを保持できる仕組みで、大量のデータをフロントで操作する場合や、APIのレスポンス等をキャッシュしたりする時に便利です。ただ、IndexedDB APIをそのまま使うと同期処理の対応を […]

2022年10月16日 / 最終更新日時 : 2022年10月28日 admin Vue.js（主にNuxt.jsとVuetify）

expandだけだとテーブル構造としては1行しか表示できず、hoverもしない。追記：item全体をslotすると2行以上表示できて、hoverも出来ました。一覧で表示し切れない情報を補足的に表示するには良さそう。 […]

2022年9月11日 / 最終更新日時 : 2022年11月19日 admin Vue.js（主にNuxt.jsとVuetify）

無限スクロールと言えばVue-infinite-loadingで、導入記事は多いのですが、テスト(Jest)の記事は見つからなかったのでメモしておきます。 Vue warnとTypeErrorがなかなか消せなかったり、 […]

2022年9月7日 / 最終更新日時 : 2022年10月9日 admin Vue.js（主にNuxt.jsとVuetify）

Rails(普通にsubmitしている場合)と、Nuxt(jsでアクションしている場合)で挙動が違うので、確認して調整してみました。地味だけど、方針を決めて、統一しておくと全体の操作性が上がりますね。

2022年7月30日 / 最終更新日時 : 2022年7月30日 admin Vue.js（主にNuxt.jsとVuetify）

APIリクエストが2回以上で、同じMockを使わなければならない場合、レスポンスも変えないとテストが通らない。知っていれば簡単なので、メモしておきます。

2022年7月24日 / 最終更新日時 : 2022年7月24日 admin Vue.js（主にNuxt.jsとVuetify）

Vuetify3がまだベータで、対応していないコンポーネントもあるので、直接Nuxt3への移行はあきらめて、Nuxt Bridgeに移行してみました。 Composition APIやTypeScriptへの変更は行わず […]

2022年3月24日 / 最終更新日時 : 2022年3月24日 admin AWS(Amazon Web Services)

API Gateway(WebSocket API)のバックエンドをRailsで実装するで作成したAPI GatewayにWebSocketで接続してメッセージのやり取りが出来るようにします。仕様は、Action C […]

2022年1月23日 / 最終更新日時 : 2022年1月23日 admin Vue.js（主にNuxt.jsとVuetify）

前回（JestでNuxt+Vuetifyのテストを書く時のTips #1）に続き、今回は異常系とクリックイベントのテストを書いてみました。これでカバレッジもほぼ100%に。テスト書くと実装漏れに気付けるのでいいですね。 […]