Vg-Countdown

This component is only for Vue.js 3+

This is a component countdown.

Installation

npm install @vemlavaraloucagamers/vg-countdown

# or

yarn add @vemlavaraloucagamers/vg-countdown

Usage

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import VgCountdown from '@vemlavaraloucagamers/vg-countdown'
import "@vemlavaraloucagamers/vg-countdown/dist/style.css";

const app = createApp(App)
app.use(VgCountdown)
app.mount('#app')

// page.vue
<template>
  <VgCountdown />
</template>

<template>
  <vg-countdown />
</template>

<template>
  <vg-countdown></vg-countdown>
</template>

Props

Items with an (*) mean they are required

| name | Value type | Default | Description | | ------- | :--------- | :------ | :---------------------------- | | vgId () | String | | Sets the id attribute to differentiate from other components | | day () | Number | 0 | Completion day, from 1 to 31 | | month () | String | jan | Completion month, jan to dec | | year () | Number | 9999 | Completion year, from an integer value representing a year to the number 9999 | | hour () | Number | 0 | Completion hour, from 1 to 31 | | minute () | Number | 0 | Completion minute, from 1 to 31 | | second (*) | Number | 0 | Completion second, from 1 to 31 | | daysText | String | 'day' | The text that will appear under the number | | hoursText | String | 'hours' | The text that will appear under the number | | minutesText | String | 'minutes' | The text that will appear under the number | | secondsText | String | 'seconds' | The text that will appear under the number | | showDays | Boolean | true | Defines whether or not to show the daysText | | showHours | Boolean | true | Defines whether or not to show the hoursText | | showMinutes | Boolean | true | Defines whether or not to show the minutesText | | showSeconds | Boolean | true | Defines whether or not to show the secondsText | | numberColor | String | '#000' | Sets the color of numbers | | textColor | String | '#000' | Sets the color of texts | | border | Boolean | false | Defines whether or not to show the border | | borderColor | String | '#000' | Sets the color of border | | separator | Boolean | false | Defines whether or not to show the separator | | separatorType | String | ':' | Sets the type of separator |

Events

| name | Return type | Description | | ------- | :--------- | :---------------------------- | | started | Boolean | Triggered when the countdown is started | | finished | Boolean | Triggered when the countdown is finished |

Example

// page.vue
<template>
  <VgCountdown
    vg-id="vg-countdown"
    :day="14"
    month="oct"
    :year="2024"
    :hour="19"
    :minute="44"
    :second="10"
    border-color="blue"
    text-color="blue"
    border
    separator
    separator-type="/"
    @started="somethingWhenStarting"
    @finished="somethingAtTheEnd"
  />
</template>

<script setup>
  const somethingWhenStarting = () => {
    console.log('VgCountdown Started')
  }
  const somethingAtTheEnd = () => {
    console.log('VgCountdown Finished')
  }

  return {
    somethingWhenStarting,
    somethingAtTheEnd
  }
</script>

# console when starting
VgCountdown Started

# console at the end
VgCountdown Finished

License

MIT