Nuxt•16mo 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>

Nuxt•16mo ago

Rush

usecookie() problem

<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>

usecookie() problem

Similar Threads

usecookie() problem

Similar Threads

Similar Threads

Similar Threads