create-adaptable-composable

To make a Vue composable accept both reactive and non-reactive inputs, define parameters using MaybeRefOrGetter types and normalize them using toValue() or toRef() inside reactive effects. This approach allows your composable to gracefully handle plain values, refs, and getter functions.

MaybeRefOrGetter in Vue 3 is a type that allows a composable to accept a plain value, a ref, or a getter function. You need it when building adaptable API wrappers and utilities that must maintain reactivity regardless of the input format provided by the consumer.

The best way to normalize refs and getters inside a Vue composable is to use toRef() for two-way writable states and toValue() for read-only values within reactive effects. This normalizes the inputs into a consistent reactive structure for your logic.

Yes, you can use these composable patterns for Nuxt 3 projects. The technique of applying MaybeRef types and normalizing inputs with toRef() and toValue() is fully compatible with Vue 3 and Nuxt 3 for building adaptable UI logic and utilities.

Use toValue() in a Vue composable when normalizing read-only inputs like useDocumentTitle, and use toRef() when you need a two-way writable state like useCounter. Both functions resolve MaybeRefOrGetter inputs but differ in whether they return a value or a reactive reference.