Function: toUnreactive()
ts
function toUnreactive<T>(value: MaybeRefOrGetter<T>): T;Recursively converts reactive Vue values to plain JavaScript equivalents. Removes all Vue reactivity (reactive, ref, computed) from nested data structures. Handles objects, arrays, primitives, and any other value types safely.
The function gracefully handles edge cases by using a try-catch block around Vue's internal APIs. If toRaw or toValue throw an error (unlikely but possible), it safely degrades to return the original value unchanged. Due to Vue's internal architecture, the original value is very unlikely to contain reactivity in error cases.
Type Parameters
| Type Parameter | Default type | Description |
|---|---|---|
T | any | The type of the input value |
Parameters
| Parameter | Type | Description |
|---|---|---|
value | MaybeRefOrGetter<T> | A reactive value, ref, getter, or plain value to convert |
Returns
T
A completely plain (non-reactive) deep copy of the input, or the original value if conversion fails
Example
typescript
const reactiveData = reactive({ user: { name: "John" }, items: [1, 2, 3] });
const plainData = toUnreactive(reactiveData);
// Result: Plain object with no Vue reactivity
const reactiveArray = reactive([1, 2, { nested: "value" }]);
const plainArray = toUnreactive(reactiveArray);
// Result: Plain array with plain objects
const primitiveRef = ref(42);
const plainPrimitive = toUnreactive(primitiveRef);
// Result: 42 (plain number)