countdown-to-date

countdown-to-date is a Vue plugin designed to display a countdown to a specific date, enriched with additional text. This plugin is an ideal solution for websites hosting events, product launches, or special occasions, providing a clear visual countdown display.

Features

• Easy Integration: Plug and play into any Vue project as a plugin.
• Customizable Text: Includes text alongside the countdown to give context to the date.
• Dynamic Countdown: Real-time countdown updates for weeks and days.
• Scoped Styling: Comes with scoped CSS for easy customization without global side effects.

Installation

You can install countdown-to-date using npm:

npm install countdown-to-date

Or with yarn:

yarn add countdown-to-date

Usage

To use the countdown-to-date plugin in your Vue app, first import the plugin and its accompanying stylesheet in your main entry file (typically main.js or main.ts). This setup will register the Countdown component globally within your Vue application, making it available in any component without needing further import or registration.

import { createApp } from 'vue';
import App from './App.vue'; // Your main Vue component
import CountdownPlugin from 'countdown-to-date';
import 'countdown-to-date/dist/style.css'; // Ensure the styles are loaded

const app = createApp(App);

// Use the Countdown plugin
app.use(CountdownPlugin);

// Mount the Vue application
app.mount('#app');

Once the plugin is installed, you can use the Countdown component anywhere in your application. Here’s an example of how to use it within a Vue component:

<template>
  <div>
    <Countdown targetDate="January 1, 2025 00:00:00" additionalText="New Year's Day" />
  </div>
</template>

This example sets up a countdown timer that will count down to January 1, 2025, displaying additional text "New Year's Day".

Props

| Prop | Type | Description | |------------------|--------|---------------------------------------------| | targetDate | String | The target date for the countdown (format: 'YYYY-MM-DD'). | | additionalText | String | Additional context text displayed alongside the date. |

Styling

The component comes with scoped CSS that can be customized as needed. The current styling sets basic typography and layout, which can be extended based on your specific design requirements.

Example of adding custom styles:

<style scoped>
.vue-countdown h1, .vue-countdown h2 {
  color: #333; /* Custom color */
}
.vue-countdown li {
  color: #555; /* Custom list item color */
}
</style>

Contributing

Contributions are welcome! Please feel free to fork the repository, make changes, and submit pull requests. You can also open issues if you find bugs or have feature requests.