toReactive

Converts a MaybeRef object to a reactive proxy with automatic ref unwrapping and Map/Set support.

Copy Markdown

Intermediate Apr 5, 2026

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

Tip

When to use Use toReactive when you want to:

Eliminate .value in templates
Pass reactive state to non-Vue code expecting plain objects
Create reactive proxies over ref-wrapped collections

Examples

Reactive Settings Object

Wraps a ref-based config object with toReactive, letting templates access properties directly without .value.

Mutate the reactive proxy directly — changes flow back to the source ref.

Theme

Language

Font size

Notifications

Sidebar

Source ref

{
  "theme": "dark",
  "language": "en",
  "fontSize": 14,
  "notifications": true,
  "sidebar": true
}

API Reference

The following API details are for the toReactive composable.

Functions

toReactive

(objectRef: MaybeRef<Z>) => UnwrapNestedRefs<Z>

Converts a `MaybeRef` to a `UnwrapNestedRefs`.