toReactive
Converts a MaybeRef object to a reactive proxy with automatic ref unwrapping and Map/Set support.
Usage
import { ref } from 'vue'
import { toReactive } from '@vuetify/v0'
const state = ref({ name: 'John', age: 30 })
const rstate = toReactive(state)
console.log(rstate.name) // 'John' (no .value needed)Architecture
toReactive creates a Proxy that unwraps ref values:
Reactivity
toReactive converts a MaybeRef into a fully reactive proxy with automatic ref unwrapping. This is the primary way to eliminate .value syntax.
| Behavior | Reactive | Notes |
|---|---|---|
| Object access | Properties are reactive, refs auto-unwrapped | |
| Map operations | get/set/entries unwrap ref values | |
| Set operations | Iteration unwraps ref values | |
| Array access | Index access unwraps nested refs |
When to use Use toReactive when you want to:
Eliminate
.valuein templatesPass reactive state to non-Vue code expecting plain objects
Create reactive proxies over ref-wrapped collections
Examples
Mutate the reactive proxy directly — changes flow back to the source ref.
{
"theme": "dark",
"language": "en",
"fontSize": 14,
"notifications": true,
"sidebar": true
}FAQ
Yes. Setting a property on the proxy writes through to the source ref.value, so watch on the original ref still fires and other consumers see the change.
Yes. get, set, and iteration over Map and Set (and array index access) all unwrap ref values stored inside them.
Returning toReactive(ref({ name: '', age: 0 })) lets callers read state.name instead of state.name.value, keeping the consuming code free of .value noise while staying reactive.