Nuxt•2mo ago

Cookie on ssr

I have a composable which reads cookies to get some values and do api calls when it runs on server it's unable to get cookies ( use cookie) doesn't work

5 Replies

kapa.ai•2mo ago

Hi @high_on_js. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issue with reading cookies during server-side rendering (SSR) in Nuxt, there are a few important points to consider: 1. useCookie should work on both client and server side in Nuxt 3. However, if you're experiencing issues, it might be due to how you're accessing or setting the cookies. 2. For server-side API calls, you need to ensure that you're forwarding the necessary headers, including cookies. You can use useRequestHeaders to access the incoming request headers and forward them to your API calls. Here's an example:

const headers = useRequestHeaders(['cookie'])
const { data } = await useFetch('/api/me', { headers })

const headers = useRequestHeaders(['cookie'])
const { data } = await useFetch('/api/me', { headers })

Passing Headers and cookies (https://nuxt.com/docs/getting-started/data-fetching#passing-headers-and-cookies) 3. If you're setting cookies in an API route and trying to access them immediately in your composable during SSR, you might encounter issues because the cookies aren't set until the response is sent. In this case, you may need to use setCookie and getCookie from the h3 package in your server API routes:

import { defineEventHandler, setCookie, getCookie } from 'h3'

export default defineEventHandler(event => {
  // Read counter cookie
  let counter = getCookie(event, 'counter') || 0

  // Increase counter cookie by 1
  setCookie(event, 'counter', ++counter)

  // Send JSON response
  return { counter }
})

import { defineEventHandler, setCookie, getCookie } from 'h3'

export default defineEventHandler(event => {
  // Read counter cookie
  let counter = getCookie(event, 'counter') || 0

  // Increase counter cookie by 1
  setCookie(event, 'counter', ++counter)

  // Send JSON response
  return { counter }
})

Cookies in API Routes (https://nuxt.com/docs/api/composables/use-cookie#cookies-in-api-routes) 4. If you're still having issues, you might want to consider using useRequestFetch which automatically forwards the request context and headers for server-side fetch requests:

const requestFetch = useRequestFetch()
const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'))

const requestFetch = useRequestFetch()
const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'))

useRequestFetch (https://nuxt.com/docs/api/composables/use-request-fetch) 5. Lastly, make sure you're using useCookie within the Nuxt context. It only works within pages, components, and plugins. If you're still encountering issues after trying these approaches, you might need to provide more specific details about your implementation for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

high_on_jsOP•2mo ago

I am accessing the cookies inside composable

!Jaeger!•2mo ago

It seems like you're facing an issue with accessing cookies on the server-side in a Nuxt.js composable. The reason useCookie() might not be working on the server side is that cookies are typically available only in the request headers when the server processes a request. Nuxt's useCookie works fine on the client-side, but on the server side, you'll need to access cookies a bit differently.

high_on_jsOP•2mo ago

I am not using server directory to make api calls so I can't use it there Use cookie needs nuxt context which is not available when composable is running server side

Gaming

Programming

Cookie on ssr

Did you find this page helpful?