2022年11月10日 / 最終更新日時 : 2022年11月10日 admin Vue.js（主にNuxt.jsとVuetify） Dexie.jsでIndexedDBを使ってみる IndexedDBはブラウザにデータを保持できる仕組みで、大量のデータをフロントで操作する場合や、APIのレスポンス等をキャッシュしたりする時に便利です。 ただ、IndexedDB APIをそのまま使うと同期処理の対応を […] Dexie.jsIndexedDBNuxt.jsVuetify
2022年10月16日 / 最終更新日時 : 2022年10月28日 admin Vue.js（主にNuxt.jsとVuetify） v-data-table：ボタンクリック(expand)で複数行の内訳の表示・非表示を切り替える expandだけだとテーブル構造としては1行しか表示できず、hoverもしない。 追記：item全体をslotすると2行以上表示できて、hoverも出来ました。 一覧で表示し切れない情報を補足的に表示するには良さそう。 […] Nuxt.jsVuetify
2022年9月7日 / 最終更新日時 : 2022年10月9日 admin Vue.js（主にNuxt.jsとVuetify） NuxtとRailsで、入力項目でEnterを押した時の挙動を調整する Rails(普通にsubmitしている場合)と、Nuxt(jsでアクションしている場合)で挙動が違うので、確認して調整してみました。 地味だけど、方針を決めて、統一しておくと全体の操作性が上がりますね。 Nuxt.jsVuetify
2022年7月24日 / 最終更新日時 : 2022年7月24日 admin Vue.js（主にNuxt.jsとVuetify） Nuxt2をNuxt Bridgeに移行してみる Vuetify3がまだベータで、対応していないコンポーネントもあるので、直接Nuxt3への移行はあきらめて、Nuxt Bridgeに移行してみました。 Composition APIやTypeScriptへの変更は行わず […] ConfigESLintJestNuxt.jsVuetify
2022年1月23日 / 最終更新日時 : 2022年1月23日 admin Vue.js（主にNuxt.jsとVuetify） JestでNuxt+Vuetifyのテストを書く時のTips #2 前回（JestでNuxt+Vuetifyのテストを書く時のTips #1）に続き、今回は異常系とクリックイベントのテストを書いてみました。 これでカバレッジもほぼ100%に。テスト書くと実装漏れに気付けるのでいいですね。 […] APIJestNuxt.jsVuetify共通化
2022年1月16日 / 最終更新日時 : 2022年1月16日 admin Vue.js（主にNuxt.jsとVuetify） JestでNuxt+Vuetifyのテストを書く時のTips #1 前回（JestでNuxt+Vuetifyのテストを書いてみる）に続き、今回は初期表示の正常系テストを書いてみました。 最初に対応する時に役立つのでメモしておきます。 JestNuxt.jsVuetify共通化
2021年12月26日 / 最終更新日時 : 2021年12月28日 admin Vue.js（主にNuxt.jsとVuetify） JestでNuxt+Vuetifyのテストを書いてみる 品質担保やテスト駆動をNuxtでもしたいので、Nuxt導入時に入れたJestでテストを書いてみました。Vuetify使うのは難しくなかったのですが、babel周りの設定やpluginのjsのテストで苦労したのでメモしてお […] JestNuxt.jsVuetify共通化
2021年10月31日 / 最終更新日時 : 2021年10月31日 admin Vue.js（主にNuxt.jsとVuetify） mixinとinjectでの共通化と可読性を上げる プロジェクトが進んで行くと同じような処理が複数のファイルに出てきて、共通化したくなってきます。（スコープ分けたかったので、今までは親子componentの分割に留めました） 共通化する事で、可読性が上がり保守・改修コスト […] Nuxt.jsVuetifyリファクタリング
2021年10月24日 / 最終更新日時 : 2021年10月23日 admin Vue.js（主にNuxt.jsとVuetify） Vue.jsにHTMLのautocomplete属性を設定する ブラウザ側でID・メールアドレスやパスワードを保存してくれるのは便利なのですが、意図しない所（アカウント登録や登録情報変更とか）でも復元されて邪魔だったり、セキュリティ的にここまで復元されると良くなさそうという所もあるの […] HTML属性Nuxt.jsVuetify
2021年10月16日 / 最終更新日時 : 2021年10月18日 admin Vue.js（主にNuxt.jsとVuetify） vee-validateで入力チェックした上で、APIからの入力エラーも各項目に表示する Nuxt.js+Vuetifyで、アカウント登録画面を実装しました。 フロントで最低限の入力チェックが通ったら、送信ボタンを押せるようにして、無駄なAPIリクエスト減らす。APIからの入力エラーもvee-validate […] APIDevise Token AuthNuxt.jsVuetify認証