Vee-Validate3を使ってたけど、Vue3を利用しているので、 Vue3対応版のVee-Validate4を試してみたときに備忘録。 かなり変わっているので、びっくりする(*´ω｀*) 主な変更点 ValidationProviderなどで囲わなくなり、 Form、Fieldなどのコンポーネントが提供…

Tailwindでは、カスタムCSSを@applyやlg:などでも使えるように、 @layer utilitiesなどを使って設定が必要。 @tailwind base; @tailwind components; @tailwind utilities; @layer components { .select2-dropdown { @apply rounded-b-lg shadow-md; } } @la…

git tagで最新のバージョンを確認してるけど、 昇順なのがめんどくさい。。 と思ったら、並び替えできるよう(*´ω｀*) # 昇順で表示 $ git tag --sort v:refname # 降順で表示 $ git tag --sort -v:refname # デフォルトの並び順を降順に設定 $ git config --…

Nuxt2+Buefyで開発していたけど、BuefyがVue3をサポートしないっぽい。。 なので、移行先としてTailsind CSSを考えている。 いきなり全部の移行は難しいので、BuefyとTailwind3が同居できる環境を整える。 Nuxt3では試してみたけど、Nuxt2+Buefyだとちょっと…

一部のページはNuxt Contentを使っているけど、 GitHub Actionsでデプロイするようにしたら、作成日などがデプロイした日時になってるよう。。 ファイルの日時を見ているので、チェックアウトした日時になってしまうらしい。。 いろいろ調べてみると、Gitの…

一部のアニメーションでLottieを使っているけど、 軽量版があるっぽいので試してみた(*´ω｀*) もとのコンポーネントはこの記事のやつ。 www.memory-lovers.blog 軽量版を利用したコンポーネント <template> <div :style="style" ref="LottieView" /> </template> <script lang="ts"> - import lottie, { AnimationItem } from "lottie-web"; …

npmでauto completeを有効にする設定があるらしい。。(*´ω｀*) $ npm completion >> ~/.bashrc 知らなかった。。(*´ω｀*) 参考にしたサイト様 npm run + Tabキーでnpm scriptを補完する - dackdive's blog

ページ内の移動には、vue-scrolltoを使ってたけど、 vue-routerだけでもいけそうだったのでためしてみた(*´ω｀*) ちなみに、Nuxt2での設定。 簡単な使い方 nuxt.config.tsのrouter.scrollBehaviorに設定を加えると、 いろいろ振る舞いを変えれるらしい(*´ω｀…

Nuxt2のSSGで静的サイトを作っているけど、 一部のコンポーネントが非同期に読み込まれてるっぽい感じに。。 調べてみると、named slotsを使っていると、 Hydrationがうまく行かず、クライアントサイドでレンダリングされるよう。。 使ってたコード 以下のよ…

以前調べたghコマンドでは、同期はできるけど、 エクスポート/インポートみたいなのはがんばらないといけなさそう。。 なので、エクスポート/ちょっと変更/インポートみたいなのはめんどい。。 いろいろ見てると、github-label-syncで、 json/yamlファイルか…