how use this countdown in nuxt 3 ?

[mr-navas]

i get error ReferenceError: document is not defined into nuxt3 component

ReferenceError: document is not defined
at addStyle (/home/navas/Desktop/Nuxt/Front-Nuxt/node_modules/vue3-flip-countdown/dist/vue3-flip-countdown.common.js:6434:22)

[Harvey Zhao]

I found a way that works with:

<template>
  <ClientOnly>
    <Countdown />
  </ClientOnly>
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    Countdown: defineAsyncComponent(async () => {
      const { Countdown } = await import("vue3-flip-countdown");
      return Countdown;
    }),
  },
};
</script>

[Mohammad Ashrafi]

I found a way that works with:

<template>
  <ClientOnly>
    <Countdown />
  </ClientOnly>
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    Countdown: defineAsyncComponent(async () => {
      const { Countdown } = await import("vue3-flip-countdown");
      return Countdown;
    }),
  },
};
</script>

this code not worked in production