vue-chronometer

A simple Vue.js component that takes an integer of seconds and counts down by one every second, displaying the time in HH:MM:SS format.

!npm
!npm bundle size
!npm
!GitHub

Table of Contents

- Installation
- Requirements
- Usage
- Global Registration
- Local Registration
- Props
- Example
- Customization
- Contributing
- License

Installation

Install the package using npm:

``bash
npm install vue-chronometer
`

Requirements

- Vue.js 3.x

This component uses the Composition API and
`

Props

$3

- Type: Number
- Required: true
- Description: The starting number of seconds for the countdown timer.

Example

Here's a basic example of how to use vue-chronometer in a component:

`vue



`

Explanation:

- Importing the Component: We import VueChronometer from the installed package.
- Registering the Component: We add it to the components object.
- Using the Component: We use in the template.
- Dynamic Prop: The timeLeft data property is bound to the etaSeconds prop, allowing us to control the timer dynamically.
- Reset Functionality: The resetTimer method resets the timeLeft, which restarts the countdown.

Customization

$3

The component renders a element containing the formatted time. You can style it using CSS classes or inline styles.

`vue



`

$3

Currently, the component does not emit any events. In future updates, I plan to add events like onFinish to notify when the countdown reaches zero.

$3

I also plan on being able to pass in a prop to change the formatting of the displayed time.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the Repository: Click the "Fork" button at the top right of the repository page.
2. Clone Your Fork: Clone your forked repository to your local machine.

`bash
git clone https://github.com/yourusername/vue-chronometer.git
`

3. Create a Feature Branch:

`bash
git checkout -b feature/my-new-feature
`

4. Make Your Changes: Implement your feature or bug fix.
5. Commit Your Changes:

`bash
git commit -am 'Add new feature'
`

6. Push to the Branch:

`bash
git push origin feature/my-new-feature
`

7. Submit a Pull Request: Go to the original repository and open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Additional Information

- Dynamic Updates: If the etaSeconds prop is updated, the timer will reset and start counting down from the new value.
- Zero Handling: When the countdown reaches zero, it stops and displays 00:00:00`.

Support

If you encounter any issues or have questions, please open an issue on the GitHub repository.