create-adaptable-composable

To create an adaptable Vue 3 composable, type your inputs as MaybeRef or MaybeRefOrGetter, then normalize them using toValue() or toRef() inside reactive effects like watch or watchEffect to handle plain values, refs, and getters uniformly.

toValue() normalizes MaybeRef or MaybeRefOrGetter inputs into plain values within reactive effects, while toRef() converts them into a ref, which is useful when building adaptable UI utilities that require a writable input or getter to maintain predictable reactivity.

You normalize MaybeRefOrGetter inputs inside a Vue watchEffect by calling toValue() on the input variable directly within the effect scope, ensuring the watcher correctly tracks reactive dependencies while supporting plain values, refs, and getters.

Yes, you can use MaybeRef and MaybeRefOrGetter types to build adaptable Nuxt 3 UI utilities, enabling your components to flexibly accept plain values, refs, or getters without forcing reactive inputs upfront.

Your Vue composable loses reactivity when passing a getter if you do not normalize the MaybeRefOrGetter input using toValue() inside a reactive effect like watch or watchEffect, which is required to properly track the getter's dependencies.

You should use MaybeRefOrGetter instead of a standard ref when building reusable Vue logic that needs to consume both reactive and non-reactive inputs, allowing components to pass plain values or getters without forcing reactivity upfront.