#some value not being set when useCookie is used

4 messages · Page 1 of 1 (latest)

delicate yewBOT
#

Hi @primal wren. 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 knowledge sources, the useCookie composable in Nuxt is designed to serialize and deserialize cookie values to and from JSON automatically, so it should support storing objects (like user details) as cookies, not just strings. The default encoder is JSON.stringify + encodeURIComponent, and the default decoder is decodeURIComponent + destr, which means objects should be handled transparently unless the value is too large or not serializable [useCookie docs].

However, there are a few things to consider:

  1. Cookie Size Limit: Browsers typically limit cookies to around 4KB per cookie. If your user details object is large, it may silently fail to set the cookie. This is a common pitfall when storing objects in cookies.

  2. Encoding/Decoding: You mentioned trying JSON.stringify and encodeURIComponent manually, but useCookie already does this for you by default. Overriding the encode/decode options is only necessary for custom behavior [encode, decode].

  3. SSR and Cookie Availability: If you set a cookie on the server (e.g., in an API route or server plugin), it may not be immediately available in the same request context due to how cookies are read from the request headers. This was a known issue and has been discussed in Nuxt's repository [server-side fetching issue].

  4. Recent Changes: There have been no documented changes in the knowledge sources that would prevent useCookie from storing non-string values, as it still serializes/deserializes JSON by default.

#

What you can try:

  • Check the size of the user object you are trying to store.
  • Inspect the actual Set-Cookie headers in your browser's dev tools to see if the cookie is being set or if there are errors.
  • Make sure you are not overriding the encode/decode options in a way that breaks object serialization.
  • If you are setting the cookie server-side, ensure you are not trying to read it in the same request cycle.

Example usage (from docs):

const user = useCookie('userInfo', {
  default: () => ({ score: -1 })
})
user.value = { name: 'John', score: 42 }

This should work for small objects [useCookie example].

If after these checks the issue persists, and you are certain the object is small enough, there may be a bug or a regression, but the knowledge sources do not indicate a change that would prevent storing objects in cookies with useCookie.

If you need to refresh the cookie value after it is set (for example, after a login API call), you can use the refreshCookie utility [refreshCookie].

I'm sorry, but the knowledge sources do not explicitly mention a recent change that would prevent storing objects with useCookie. The most likely cause is cookie size or context issues.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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