Nuxt•4w ago

useCookie returns undefined

onMounted(() => {
  fetchUsers()
  console.log(useCookie('token').value)
})

onMounted(() => {
  fetchUsers()
  console.log(useCookie('token').value)
})

my useCookie here always returns undefined though the cookie is present

3 Replies

kapa.ai•4w ago

Hi @FearArt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, there are a few potential reasons why useCookie might be returning undefined in your case, even though the cookie is present. Let's explore these possibilities: 1. Server-side vs Client-side: useCookie is designed to work in both server-side and client-side contexts. However, there have been issues reported where cookies set on the server were not immediately available on the client. This was addressed in a fix described in this GitHub pull request (https://github.com/nuxt/nuxt/pull/21940), which mentions that cookies set using useCookie in plugins were not accessible until the next request. 2. Cookie Expiration: There was a fix implemented to unset useCookie values when they expire, as described in this pull request (https://github.com/nuxt/nuxt/pull/23549). If your cookie has expired, it might return undefined. 3. Timing Issues: Since you're using onMounted, it's possible that the cookie is not yet available when you're trying to access it. The cookie might be set asynchronously or after the component has mounted. To address this issue, you could try the following: 1. Use the refreshCookie utility to manually refresh the cookie value. This was introduced in Nuxt v3.10 to handle cases where cookie values change. Here's how you could modify your code:

import { refreshCookie } from '#app'

onMounted(() => {
  fetchUsers()
  refreshCookie('token')
  console.log(useCookie('token').value)
})

import { refreshCookie } from '#app'

onMounted(() => {
  fetchUsers()
  refreshCookie('token')
  console.log(useCookie('token').value)
})

Source: Nuxt Documentation (https://nuxt.com/docs/api/utils/refresh-cookie) 2. Enable the experimental cookieStore option in your nuxt.config.ts:

export default defineNuxtConfig({
  experimental: {
    cookieStore: true
  }
})

export default defineNuxtConfig({
  experimental: {
    cookieStore: true
  }
})

This option enables CookieStore support to listen for cookie updates and automatically refresh useCookie ref values. Source: Nuxt Documentation (https://nuxt.com/docs/api/nuxt-config#cookiestore) 3. If you're setting the cookie in an API route, make sure you're using setCookie from the h3 package correctly:

export default defineEventHandler(event => {
  setCookie(event, 'token', 'your-token-value')
  // ...
})

export default defineEventHandler(event => {
  setCookie(event, 'token', 'your-token-value')
  // ...
})

Source: Nuxt Documentation (https://nuxt.com/docs/api/composables/use-cookie#cookies-in-api-routes) If none of these solutions work, you might want to double-check that the cookie is actually being set correctly and that there are no issues with your authentication flow or API calls. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@360699173378588674> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Reinier Kaper•3w ago

Would fetchUsers need to be awaited in order for the cookie to appear? That would explain why it's undefined (because fetchUsers isn't resolved yet) Try awaiting that call first

Gaming

Programming

useCookie returns undefined