create-adaptable-composable

Vue composables handle both plain values and reactive inputs by defining a single API and normalizing inputs with toRef or toValue. This approach natively supports MaybeRef and MaybeRefOrGetter types without requiring duplicated logic.

Normalizing composable inputs with toRef creates a ref from a MaybeRefOrGetter for reactive state tracking, while toValue extracts the plain value from a MaybeRefOrGetter. Choose toRef when you need ongoing reactivity, and toValue for one-time value extraction.

Yes, this composable pattern works with both Vue 3 and Nuxt 3 projects. The design steps for normalizing inputs with toRef or toValue apply directly to both environments to create flexible reactive utilities.

You should use MaybeRefOrGetter instead of MaybeRef when you want to support getter functions as inputs for lazy evaluation. This allows passing a function that returns a value, providing extra flexibility over standard refs or plain values.

Building an adaptable Vue composable requires confirming the API, normalizing inputs with toRef or toValue to support MaybeRef types, and implementing the core reactive logic using Vue's APIs. This ensures the utility works flexibly across components.

A Vue composable may fail to update with a reactive variable if it does not normalize the input using toRef or toValue. Without normalizing MaybeRef or MaybeRefOrGetter inputs, the composable loses reactivity when processing plain values.