Timer for Pomodoro Technique built on Vue.js

by Vue.js Examples

pomodoro

Timer for Pomodoro Technique built on Vue.js 2.0 with PWA

Built using Vue.js 2.0 with PWA (Progressive Web Apps) and Bootstrap 4.

View demo Download Source

Technologies/Modules used

  • Vue.js 2.0
  • Vue Router
  • Vuex
  • Bootstrap 4 Beta 2 (css only)
  • Bootstrap Vue

Features

  • 25 minutes Pomodoro interval
  • 5 minutes Short Break interval
  • 20 minutes Long Break interval
  • Different timer text color during break time
  • Toggle Sound
  • Toggle Autostart Next Interval
  • Intervals completed log
  • Responsive

Query string configurations

Function Parameter Default Setting
Whether to start next interval when the current one is completed autonext off on/off
Start timer immediately autostart off on/off
Play sound when the current interval is completed sound on on/off

Usage Tip

To open this app in a small window on a desktop machine, type the following into the browser address bar or create a bookmark:

**javascript:window.open('https://pomodoro-timer.github.io', 'pomodoro', 'height=350,width=400')**

Note #1: Sometimes browser will skip the front javascript: during paste, type this in manually if necessary.

Note #2: Some browsers might not support all the features if invoked this way. For example Microsoft Edge does not support window sizing.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

GitHub