State Management

useState is an SSR-friendly ref replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.

Best practices

Examples

Basic usage

In this example, we use a component-local counter state. Any other component that uses useState('counter') shares the same reactive state.

<script setup>const counter = useState('counter', () => Math.round(Math.random() * 1000))</script><template>  <div>    Counter: {{ counter }}    <button @click="counter++">      +    </button>    <button @click="counter--">      -    </button>  </div></template>

Advanced

In this example, we use a composable that detects the user's default locale from the HTTP request headers and keeps it in a locale state.

Shared state

By using auto-imported composables we can define global type-safe states and import them across the app.

export const useCounter = () => useState<number>('counter', () => 0)export const useColor = () => useState<string>('color', () => 'pink')

<script setup>const color = useColor() // Same as useState('color')</script><template>  <p>Current color: {{ color }}</p></template>