Nuxt3,vitest

store に Pinia を使ってバリデーションには VeeValidate という作りで Nuxt3 を使った web アプリならよくありそうな構成に対して vitest でテストを書く機会があったのでポイントをいくつかまとめてお ...

Nuxt3,Vue

前回こちらで yup を使ったバリデーションについての記事を上げましたが、今回はバリデーションの全体像についてです。input タグではなく自前のカスタムコンポーネントをプロジェクト内部で作る事はよくありそうですが、入力と双方向バイン ...

Nuxt3

Nuxt3 では runtimeConfig という実行時の設定をロードする仕組みが提供されていてそれを使って環境変数を指定するように推奨されていたので(参照)、今回はこちらの実装方法を残しておきます。

env ファイル設定

Nuxt3

最近ついにNuxt3を触る機会があったのでNuxt3系の備忘録も残していきたいと思います。

最初はNuxt3で特徴的なuseFetchについて。

Axios では interceptors.response.u ...

Jest,Vue

前回は下記の記事で Vue 3 + Jest でのテストを実行できる状態にまでしました。

今回は compositionAPI で実装して Store や Router を使っているページのテストを書いていきます。 ...

Jest,Vue

Vue3 を使ったプロジェクトの単体テストを作成する際にいくつか詰まった点もあったので 1 から記録していきます。

( 今回はまず jest を追加したり等環境準備の部分についてです。その他テストコードについても後ほど更新 ...

Vue

Vue3 でプラグイン無しで下記のような簡単な日付入力を作成したのでその過程をメモ程度。

日付入力フォームが必要なサイトはよくあると思いますので残しておきます。

要件として下記のような input フォームにし ...

Vue

Google Calendar を表示したいけれどデフォルトのデザインだとあまり良くないので FullCalendar と組み合わせるとデザインを変えて Google Calendar の表示ができるという記事はいくつか紹介されていま ...

Vue

以前下記の記事で vuex-persistedstate の紹介をしました。

しかし今回このプラグインによって localStorage から Store に反映されるタイミングが問題で思い通りの挙動にならない事で困る場面 ...

Vue,未分類

よくある星での5段階評価ができるコンポーネント。自分で実装するのは面倒なのでプラグインで実装します。

今回は こちら vue-star-rating を使用しました。一応 Vue3 対応なのですが、一部上手く動かず詰まった ...