vuemodoro

SFC Vue component implementing a Pomodoro timer

Vuemodoro is a Vue Single File Component implementing a countdown timer, intended to provide a Pomodoro countdown in your Vue applications. It comes with a set of properties making the component customizable for your needs. For example, you can customize either the duration of the countdown or the labels of the buttons for interacting with the component.
Moreover, you can choose between different styles for your Vuemodoro look and feel. 🍅

Properties

If you need to customize the Pomodoro timer behavior, you can use one of the following optional properties.

| Properties | Default | Description | Type | |----------------|-------------|----------------------------------------------------------------------------------------|------------------| | minutes | 25 | sets the minutes of the countdown | Number | | seconds | 0 | sets the seconds of the countdowm | Number | | pomodoro-label | Pomodoro Timer | adds a descriptive label to the timer container | String | | start-label | Start | adds a descriptive label to the start button of the timer | String | | pause-label | Pause | adds a descriptive label to the pause button of the timer | String | | reset-label | Reset | adds a descriptive label to the reset button of the timer | String | | muted | false | defines if the timer must play a sound when the countdown ends. | Boolean | | theme | dark | defines the styles of the timer. It comes with three different styles. bare, light and dark are the available options. | String |

Installation

You can install Vuemodoro using npm:

npm install --save vuemodoro

Alternatively, you can import vuemodoro via <script> tag in the browser directly, avoiding the NPM installation:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuemodoro"></script>

Usage

Once installed, it is easy to use it.

Importing the component

First, you need to import vuemodoro in your files. You can do that in different ways. For example, it can be imported into a build process for use in full-fledged Vue applications:

import Pomodoro from 'vuemodoro';

export default {
  components: {
    Pomodoro,
  },
  // rest of the component
}

Using the component

Once imported, you can use your component as follows:

<Pomodoro/>

Themes

Vuemodoro comes with a theme prop. It allows to modify the look and feel of the component. The available options are:

• bare, it is a minimal look and feel, intended for customization:

• light, it is the light theme of Vuemodoro:

• dark, it is the dark theme of Vuemodoro:

Contributing

This component can be improved both in features and performances. Please, help me in doing it better 🍅