はじめに
こんにちは、がんがんです。
皆さんは VueUse を利用してますか？VueUse は汎用性の高い関数群(composables)をまとめたライブラリです。
マウス操作、クリップボード利用、ブラウザのウィンドウサイズ取得など自前で実装すると地味に面倒な作業を支援してくれる関数がすぐに利用できるライラブリです。
VueUses の利用記事として以下の記事が面白かったです。
200 以上の composables が用意されており非常に便利な VueUse ですが、普段 VueUse を利用する方はこのように思ったことありませんか？
「これってどうやって使うねん。利用事例どこかで見れないかな」
それぞれについての簡単な使い方は記載があるものの実際のプロダクトでの利用事例などは特に記述がありません。
そのため、「なんか良さそうだけど利用方法が分からない」となり得やすいです。
そこで本記事では Vue および Nuxt の公式で利用されている VueUse 事例を集めてみました。
そもそも VueUse ってどんなアドオンがあるのか？
VueUse を普段利用されていない方は@xyz/vueuseというライブラリが存在していると思うかもしれません。しかし、VueUse は@vueuse/core、@vueuse/headなど多くのアドオンが存在しています。
Nuxt UI
useTimestamp
createSharedComposable
unrefElement
useActiveElement
useBreakpoints, breakpointsTailwind
useClipboard
useResizeObserver
Shadcn for Vue
useMounted
useVModel
Radix Vue
useResizeObserver
useEventListener
useStorage
Nuxt 公式ドキュメント
Nuxt 公式ドキュメントでは@vueuse/coreは導入されていませんでした。しかし、nuxt.config に以下のような記述があります。
@vueuse/nuxtというモジュールがありそうですね。
これかな？説明文には以下のような記載があります。
This is an add-on of VueUse, which provides better Nuxt integration auto-import capabilities.
なるほど、Nuxt 用に auto-imports 出来るようになっているモジュールのようです。
対象関数を探してみました。実際にuseCookie composable が Auto-imports で利用されていましたね。
おわりに
VueUse の利用事例について集めてみました。
今回の調べてみたものはあくまで 1 事例であり思ったよりも利用されている印象を持ちました。
先週 8/16 には VueUse のv11.0.0がリリースされたばかりです。
今後も進化し続けていく VueUse の動向に目が離せないですね
Discussion