create-adaptable-composable

Adaptable composables are reusable functions that can accept both reactive and non-reactive inputs. This allows developers to use the composable in a variety of contexts without worrying about the reactivity of the inputs. Steps to design an adaptable composable in Vue.js: When MaybeRefOrGetter or MaybeRef is used: Adaptable useDocumentTitle Composable: read-only title parameter Adaptable useCounter Composable: two-way writable count parameter - Confirm the composable's purpose and API design and expected inputs/outputs. - Identify inputs params that should be reactive (MaybeRef / MaybeRefOrGetter). - Use toValue() or toRef() to normalize inputs inside reactive effects. - Implement the core logic of the composable using Vue's reactivity APIs. - Read-only, computed-friendly input: use MaybeRefOrGetter - Needs to be writable / two-way input: use MaybeRef - Parameter might be a function value (callback/predicate/comparator): do not use MaybeRefOrGetter , or you may accidentally invoke it as a getter. - DOM/Element targets: if you want computed/derived targets, use MaybeRefOrGetter .