readonly()
Returns a deeply read-only proxy of an object or ref.
Syntax
readonly<T>(target: T): DeepReadonly<T>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
target | object | Ref | No | The source to wrap as read-only. |
Returns
DeepReadonly<T> — A proxy that warns on any write attempt.
Examples
<script setup lang="ts">
import { reactive, readonly } from 'vue';
const original = reactive({ count: 0 });
const copy = readonly(original);
// copy.count++ -> warns in dev, no-op
original.count++; // copy reflects the change reactively
</script>
Notes
The returned proxy is deeply read-only and stays reactive to changes made
through the original source. Writes are blocked and warn in development.
Commonly used with provide() to expose state that consumers should not
mutate directly.