くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Vue3対応版のVee-Validate4がかなり変わっていた

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

nuxt-tailwindでも`@layer utilities`を使いたい

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

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

Nuxt2+Buefy環境にTailwind3+nuxt-tailwindを導入する

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

GitHub ActionsでもNuxt ContentのcreatedAtが正しい日時になるようにする(nuxt-content-git)

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

lottie_lightでバンドルサイズを削減する

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

npm scirptでauto completionを有効にする

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

vue-routerだけでページ内のsmooth-scrollを実現する

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

Nuxt2のnuxt/componentsでgenerateするとnamed slotsでレンダリングされない

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

GitHub CLI(gh)とgithub-label-syncでIssue Labelをエクスポート/インポートする

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