toReactive

The toReactive utility function converts a MaybeRef object to a reactive proxy, automatically unwrapping ref values. It provides special handling for Map, Set, and regular objects.

Copy Markdown

Intermediate100% coverageMar 3, 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

API Reference

The following API details are for the toReactive composable.

Functions

toReactive

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

Converts a `MaybeRef` to a `UnwrapNestedRefs`.