Toast

<script lang="ts" setup>
import { useCountdown } from '@vueuse/core'

const countdownSeconds = 5

const { addToast, updateToast } = useToast()

const open = ref(false)

const { remaining, start } = useCountdown(countdownSeconds, {
  onTick() {
    updateToast('bare-metal-create', {
      description: h('div', {
        class: ' font-bold text-white',
        innerHTML: `${remaining.value} secs`,
      }),
    })
  },
})

function handleClick() {
  open.value = false

  start()

  addToast({
    title: 'Dynamic update example',
    id: 'bare-metal-create',
    description: h('div', {
      class: ' font-bold text-white',
      innerHTML: `${remaining.value} secs`,
    }),
    duration: Infinity,
    progress: false,
    close: false,
  })
}
</script>

<template>
  <div>
    <CButton @click="handleClick">
      Add to calendar
    </CButton>
  </div>
</template>