Nuxt 3 reached end of life on 31 July 2026
It no longer receives bug fixes or security patches. Upgrade to Nuxt 4 or get extended support from HeroDevs

State Management

Source
This example shows how to use the `useState` composable to create a reactive and SSR-friendly shared state across components.
app.vue
Open docs
<script setup>
const counter = useState('counter', () => Math.round(Math.random() * 1000))
const sameCounter = useState('counter')
</script>

<template>
  <NuxtExample dir="features/state-management">
    <p>Counter: {{ counter }}</p>
    <div class="flex gap-2 my-4">
      <UButton @click="counter--">
        -
      </UButton>
      <UButton @click="counter++">
        +
      </UButton>
    </div>
    <p>Same Counter: {{ sameCounter }}</p>
  </NuxtExample>
</template>
https://state-management.example.nuxt.space
Read more in Docs > Getting Started > State Management.
Read more in Docs > API > Composables > Use State.