Accept a value, ref, or getter in the same composable
In Vue 3.3+, toValue() unwraps refs and calls getters. Run it inside a reactive effect so changing inputs remain tracked.
import { computed, ref, toValue } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
export function useGreeting(
name: MaybeRefOrGetter<string>
) {
return computed(() => `Hello, ${toValue(name)}!`)
}
// All three input shapes work
const nameRef = ref('Michał')
useGreeting('Michał')
useGreeting(nameRef)
useGreeting(() => nameRef.value.toUpperCase())
Unlike unref(), toValue() also evaluates getter functions. Passing props.name directly would only pass its current value.