Nuxt provides useState to create a globally shared state.


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.


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


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(
    () => nuxt.ssrContext.req.headers['accept-language']?.split(',')[0]
<script setup>
const locale = useState('locale')

  Current locale: {{ locale }}
Edit this page on GitHub Updated at Fri, Oct 15, 2021