C
create-adaptable-composable
Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.
How to use
- Upewnij się, że Twój projekt używa Vue 3 lub wyższej wersji (lub Nuxt 3+), ponieważ skill wymaga tych wersji.
- Zdefiniuj cel i API composable'a — określ, jakie parametry powinny być reaktywne i jakie wartości będzie zwracać.
- Zidentyfikuj parametry wejściowe, które powinny obsługiwać zarówno wartości zwykłe, jak i reaktywne. Oznacz je typem MaybeRef (jeśli mogą być zapisywalne) lub MaybeRefOrGetter (jeśli mają być tylko do odczytu).
- Wewnątrz efektów reaktywnych (watch, watchEffect) normalizuj wejścia za pomocą toValue() lub toRef(), aby obsługiwać wszystkie formy wejścia — zwykłe wartości, referencje, computed czy gettery.
- Zaimplementuj logikę composable'a używając Vue Reactivity API, pamiętając o regułach: dla wejść tylko do odczytu użyj MaybeRefOrGetter, dla zapisywalnych użyj MaybeRef, a dla callbacków unikaj MaybeRefOrGetter, aby nie aktywować ich przypadkowo jako gettery.
- Przetestuj composable z różnymi typami wejść (wartości zwykłe, refs, computed, gettery) aby upewnić się, że zachowuje się przewidywalnie w każdym kontekście.