2025年6月28日 / 最終更新日時 : 2025年6月28日 admin Vue.js（主にNuxt.jsとVuetify） @nuxtjs/i18nのバージョンアップでハマったのでメモ i18n自体のエラーは出なかったけど、翻訳されず、定義名が表示されるようになりました。 Vitestも落ちるようになった。上記のi18nに対応した副作用と、happy-domのバージョンアップ影響？でした。 i18nNuxt.jsNuxt3
2025年1月5日 / 最終更新日時 : 2025年1月5日 admin Vue.js（主にNuxt.jsとVuetify） @nuxt/eslintを導入してeslintをv8からv9にバージョンアップしてみた v9にバージョンアップするには設定ファイルを書き換えなければならないので、v8に固定（typescriptも依存している為、v5.3に）していました。 レガシー設定(.eslintrc)がいずれサポート外になるので、早め […] ESLintNuxt.jsNuxt3バージョンアップ
2024年11月17日 / 最終更新日時 : 2024年12月8日 admin Vue.js（主にNuxt.jsとVuetify） (Vuetify3)v-autocomplete：無駄なAPIリスクエストをせずにサジェストを表示する v-autocompleteをVuetify2からVuetify3に移行してみました。 選択肢に選択している値が無くても表示されるようなったり、 イベントが整理され、mousedownやchange、blurを使って頑張 […] APINuxt.jsNuxt3Nuxt3移行Vuetify
2024年2月16日 / 最終更新日時 : 2024年2月20日 admin Vue.js（主にNuxt.jsとVuetify） Nuxt.jsでブラウザの優先言語で表示言語を切り替えたい Next.js(next-intl)では、localeを含まないURLにアクセスした場合に、優先言語で表示が切り替わったり、URLが書き換わりましたが、 Nuxt.js(@nuxtjs/i18n)では、defaultLo […] i18nNuxt.jsNuxt3Vue3
2023年7月7日 / 最終更新日時 : 2024年11月17日 admin Vue.js（主にNuxt.jsとVuetify） (Vuetify2)v-autocomplete：無駄なAPIリスクエストをせずにサジェストを表示する 選択肢が少ない場合はセレクトボックス(v-select)で良いのですが、数が多い場合はサジェスト(suggest)して選択させた方が良いですよね。 候補はいくつかありますが、最終的にv-autocompleteを使用する […] APINuxt.jsVuetify
2023年4月23日 / 最終更新日時 : 2023年4月27日 admin Vue.js（主にNuxt.jsとVuetify） vee-validateにカスタムバリデーションを追加して使用有無を制御する APIでは不正値が保存されないように必ずバリデーションを掛けますが、フロントは任意。 でも、あった方がユーザーが入力段階で気付けるのと、無駄なAPIリクエストを抑制できる。 フロントだけで完結できるものは追加した方が、親 […] Nuxt.jsvalidates
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 […] CircleCINuxt.jsyarn環境構築
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日 / 最終更新日時 : 2023年12月23日 admin Vue.js（主にNuxt.jsとVuetify） v-data-table：ボタンクリック(expand)で複数行の内訳の表示・非表示を切り替える expandだけだとテーブル構造としては1行しか表示できず、hoverもしない。 追記：item全体をslotすると2行以上表示できて、hoverも出来ました。 一覧で表示し切れない情報を補足的に表示するには良さそう。 […] Nuxt.jsVuetify
2022年9月11日 / 最終更新日時 : 2022年11月19日 admin Vue.js（主にNuxt.jsとVuetify） Jestで無限スクロール(Vue-infinite-loading)のテストを書く 無限スクロールと言えばVue-infinite-loadingで、導入記事は多いのですが、 テスト(Jest)の記事は見つからなかったのでメモしておきます。 Vue warnとTypeErrorがなかなか消せなかったり、 […] JestNuxt.js