Nuxt•4d ago

usecookie() problem

Hi, I have a problem with usecookie. I am trying to keep the darkmode value even after closing the page. The problem is that in "npm run dev" environment it works, but after generating it with "npx nuxi generate" and uploading it to a static webhost it doesn't. I believe the problem may be in the bind of the 'dark' class to the darkMode value. If I remove this and only display the darkmode value using {{ darkMode }} it works on static hosting. Please help.

<template>
  <div class="min-h-screen bg-white text-black dark:bg-black dark:text-white" :class="{'dark' : darkTheme}">
    <p>Dark theme: {{ darkTheme }}</p>
    <button type="button" @click="toggleTheme">Toggle theme</button>
  </div>
</template>

<script setup lang="ts">
const darkTheme = useCookie(
  'darkTheme',
  {
    default: () => true,
    watch: true
});

const toggleTheme = () => {
  darkTheme.value = !darkTheme.value;
};
</script>

<template>
  <div class="min-h-screen bg-white text-black dark:bg-black dark:text-white" :class="{'dark' : darkTheme}">
    <p>Dark theme: {{ darkTheme }}</p>
    <button type="button" @click="toggleTheme">Toggle theme</button>
  </div>
</template>

<script setup lang="ts">
const darkTheme = useCookie(
  'darkTheme',
  {
    default: () => true,
    watch: true
});

const toggleTheme = () => {
  darkTheme.value = !darkTheme.value;
};
</script>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

usecookie() problem