Readonly for immutable reactive data in Vue

Introduction

Readonly makes reactive data unchangeable. It helps keep data safe from accidental changes.

When you want to share data but prevent others from changing it.

When you have a constant configuration object in your app.

When you want to protect state that should not be modified after setup.

When you pass data to child components and want to avoid mutations.

When debugging to ensure some data stays fixed.

Syntax

Vue

import { reactive, readonly } from 'vue';

const original = reactive({ count: 0 });
const locked = readonly(original);

readonly() wraps reactive data to make it immutable.

Trying to change locked will not update the data and will warn in dev mode.

Examples

This example shows how to create a readonly version of reactive state.

Vue

import { reactive, readonly } from 'vue';

const state = reactive({ name: 'Alice' });
const frozenState = readonly(state);

// frozenState.name = 'Bob'; // This will not change the value

Readonly can also be used on plain objects to prevent changes.

Vue

import { readonly } from 'vue';

const config = readonly({ theme: 'dark', language: 'en' });

// config.theme = 'light'; // This change is ignored

Sample Program

This Vue component shows a count that is wrapped in readonly. The button tries to increment the count by changing the original reactive state. Direct changes to the readonly object are ignored.

Vue

<template>
  <div>
    <p>Count: {{ locked.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { reactive, readonly } from 'vue';

const state = reactive({ count: 0 });
const locked = readonly(state);

function increment() {
  // Trying to change locked.count will not work
  // locked.count++ // This will warn and not update

  // Change original reactive state instead
  state.count++;
}
</script>

Important Notes

Readonly only prevents changes on the wrapped object, not on the original reactive source.

Readonly is useful to protect data passed to child components.

In development mode, Vue warns if you try to mutate readonly data.

Summary

Readonly makes reactive data immutable to prevent accidental changes.

Use it when you want to share data safely without allowing modifications.

Readonly objects reflect changes from the original reactive source but cannot be changed directly.