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

useCookie

Source
This example shows how to use the useCookie API to persist small amounts of data that both client and server can use.
app.vue
Open docs
<script setup lang="ts">
const user = useCookie<{ name: string } | null>('user')
const logins = useCookie<number>('logins')

const name = ref('')

const login = () => {
  logins.value = (logins.value || 0) + 1
  user.value = { name: name.value }
}

const logout = () => {
  user.value = null
}
</script>

<template>
  <NuxtExample
    class="h-50"
    dir="advanced/use-cookie"
  >
    <template v-if="user">
      <h1 class="text-3xl mb-3">
        Welcome, {{ user.name }}! 👋
      </h1>
      <div>
        <UAlert
          title="Logged-In"
          color="primary"
          icon="i-heroicons-light-bulb"
        >
          <template #description>
            You have logged in <b>{{ logins }} times</b>!
          </template>
        </UAlert>
      </div>
      <div class="mt-3">
        <UButton
          color="warning"
          icon="i-heroicons-arrow-left"
          @click="logout"
        >
          Log out
        </UButton>
      </div>
    </template>
    <template v-else>
      <h1 class="text-3xl mb-3">
        Login
      </h1>
      <UInput
        v-model="name"
        class="w-100 m-auto"
        placeholder="Enter your name..."
        @keypress.enter="login()"
      />
      <div class="mt-3">
        <UButton
          icon="i-heroicons-user"
          :disabled="!name"
          name="Log in"
          @click="login"
        >
          Log in
        </UButton>
      </div>
    </template>
  </NuxtExample>
</template>
https://use-cookie.example.nuxt.space
Read more in Docs > API > Composables > Use Cookie.