Nuxt/docs/content/3.docs/1.usage/2.state.md

State

Nuxt provides useState to create a globally shared state.

useState

Within your pages, components and plugins you can use useState. It can be used to create your own store implementation.

You can think of it as an SSR-friendly ref in that its value will be hydrated (preserved) after server-side rendering. It is shared across all components.

Usage

useState<T>(key: string, init?: () => T): Ref<T>

• key: a unique key ensuring that data fetching can be properly de-duplicated across requests
• init: a function that provides initial value for the state when it's not initiated

Example

In this example, we use a server-only plugin to find about request locale.

import { defineNuxtPlugin, useState } from '#app'

export default defineNuxtPlugin((nuxt) => {
  const locale = useState(
    'locale',
    () => nuxt.ssrContext.req.headers['accept-language']?.split(',')[0]
  )
})

<script setup>
const locale = useState('locale')
</script>

<template>
  Current locale: {{ locale }}
</template>