A Vue.js component that takes an integer of seconds and counts down by one every second
npm install vue-chronometerA 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
- Installation
- Requirements
- Usage
- Global Registration
- Local Registration
- Props
- Example
- Customization
- Contributing
- License
Install the package using npm:
``bash`
npm install vue-chronometer
- Vue.js 3.x
This component uses the Composition API and
`
- Type: Numbertrue
- Required:
- Description: The starting number of seconds for the countdown timer.
Here's a basic example of how to use vue-chronometer in a component:
`vue
Countdown Timer Example
`
Explanation:
- Importing the Component: We import VueChronometer from the installed package.components
- Registering the Component: We add it to the object.
- Using the Component: We use in the template.timeLeft
- Dynamic Prop: The data property is bound to the etaSeconds prop, allowing us to control the timer dynamically.resetTimer
- Reset Functionality: The method resets the timeLeft, which restarts the countdown.
The component renders a element containing the formatted time. You can style it using CSS classes or inline styles.
`vue
`
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.
I also plan on being able to pass in a prop to change the formatting of the displayed time.
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.
This project is licensed under the MIT License. See the LICENSE file for details.
---
- Dynamic Updates: If the etaSeconds prop is updated, the timer will reset and start counting down from the new value.00:00:00`.
- Zero Handling: When the countdown reaches zero, it stops and displays
If you encounter any issues or have questions, please open an issue on the GitHub repository.