Nuxt•4mo ago

useCookie empty on client?

I'm using useCookie with universal rendering. However, when I try to access my cookie client side, it appears to be undefined however, SSR shows the cookie is there but then gets unset after? Not sure why this is, here is my code and my cookie, this is all inside app.vue

<script setup lang="ts">
const auth = useAuthStore();
const cookie = useCookie<string>('vault.sid', { readonly: true });

console.log(cookie.value)

onMounted(() => {
  // Lets check for the existence of our cookie :)

  if (!auth.isLoggedIn) {
    console.log(cookie.value)

    if (!cookie.value) return;

    auth.checkForToken(cookie.value);
  }
})

</script>

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
const auth = useAuthStore();
const cookie = useCookie<string>('vault.sid', { readonly: true });

console.log(cookie.value)

onMounted(() => {
  // Lets check for the existence of our cookie :)

  if (!auth.isLoggedIn) {
    console.log(cookie.value)

    if (!cookie.value) return;

    auth.checkForToken(cookie.value);
  }
})

</script>

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

1 Reply

GobboOP•4mo ago

it also briefly displays it in the view, however quickly disappears leading to a hydration mismatch maybe im not understanding it well enough but not sure what else to do? the cookie is set via a seperate server mind Clearly dont know how cookies work HttpOnly means that only server can access it ( hence why it appears in the server ) didn't know this :)

Gaming

Programming

useCookie empty on client?