Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/philipjkim/vue2-flip-countdown

A countdown timer with flip effect for Vue 2.x
https://github.com/philipjkim/vue2-flip-countdown

Last synced: about 1 month ago
JSON representation

A countdown timer with flip effect for Vue 2.x

Lists

README 

        
# vue2-flip-countdown



[![npm version](https://badge.fury.io/js/vue2-flip-countdown.svg)](https://badge.fury.io/js/vue2-flip-countdown) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)



A simple flip countdown timer component for Vue 2.x



![screenshot](https://github.com/philipjkim/vue2-flip-countdown/blob/master/screenshot.png?raw=true)



[Demo](https://philipjkim.github.io/vue2-flip-countdown/index.html)



## Notes on v1.0.0+



`1.x.x` versions are based on Webpack 5.x, whereas `0.x.x` versions are based on Webpack 3.x. 

If you have any trouble when upgrading to `1.x.x`, please roll back version to `0.x.x`. 



## Installation



```

npm i vue2-flip-countdown --save

```



### Running Demo on Local Machine



```

cd demo

npm i

npm run serve

```



Then open  on a browser.



## Usage



```vue



  


    

  



  import FlipCountdown from 'vue2-flip-countdown'



  export default {

    components: { FlipCountdown }

  }



```



- If you want to remove days section, set `showDays` prop to `false` (available since v0.10.0)

- If you want to remove hours/minutes/seconds section, set `showHours`/`showMinutes`/`showSeconds` prop to `false` (available since v0.11.0)



    ```vue

    

    ```



- To notify if timer has elapsed, bind a handler to `timeElapsed` event emitted by component



    ```vue

    

    ```



Please refer to `/demo` directory for examples.



If you're using [Nuxt.js](https://nuxtjs.org/), use [``](https://nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component) to avoid server-side rendering. (You will get error if you don't use ``)



```vue



  


    

      

    

  



```



# References



- [vuejs-countdown](https://github.com/getanwar/vuejs-countdown)

- [Demo for 'Flip clock & countdown, Vue'](https://codepen.io/shshaw/pen/BzObXp)