How do I create a simple 10 seconds countdown in Vue.js

Please check if this works for you.

<template>   {{ countDown }}</template><script>    export default {        data() {            return {                countDown : 10            }        },        method: {            countDownTimer() {                if(this.countDown > 0) {                    setTimeout(() => {                        this.countDown -= 1                        this.countDownTimer()                    }, 1000)                }            }        }        created: {           this.countDownTimer()        }    }</script>

Whilst the accepted answer works, and is great, it can actually be achieved in a slightly simpler way by utilising Vue.js watchers:

<template>    {{ timerCount }}</template><script>    export default {        data() {            return {                timerCount: 30            }        },        watch: {            timerCount: {                handler(value) {                    if (value > 0) {                        setTimeout(() => {                            this.timerCount--;                        }, 1000);                    }                },                immediate: true // This ensures the watcher is triggered upon creation            }        }    }</script>

The benefit of using this method is that the timer can be immediately reset by simply setting the value of timerCount.

If you would like to play/pause the timer, then you can achieve this like so (note - this is not a perfect solution as it will round to the nearest second):

<template>    {{ timerCount }}</template><script>    export default {        data() {            return {                timerEnabled: true,                timerCount: 30            }        },        watch: {            timerEnabled(value) {                if (value) {                    setTimeout(() => {                        this.timerCount--;                    }, 1000);                }            },            timerCount: {                handler(value) {                    if (value > 0 && this.timerEnabled) {                        setTimeout(() => {                            this.timerCount--;                        }, 1000);                    }                },                immediate: true // This ensures the watcher is triggered upon creation            }        }        methods: {            play() {                this.timerEnabled = true;            },            pause() {                this.timerEnabled = false;            }        }    }</script>

Here is a component I made for a countdown timer :

<template>  <div>    <slot :hour="hour" :min="min" :sec="sec"></slot>  </div></template><script>export default {  props : {    endDate : {  // pass date object till when you want to run the timer      type : Date,      default(){        return new Date()      }    },    negative : {  // optional, should countdown after 0 to negative      type : Boolean,      default : false    }  },  data(){    return{      now : new Date(),      timer : null    }  },  computed:{    hour(){      let h = Math.trunc((this.endDate - this.now) / 1000 / 3600);      return h>9?h:'0'+h;    },    min(){      let m = Math.trunc((this.endDate - this.now) / 1000 / 60) % 60;      return m>9?m:'0'+m;    },    sec(){      let s = Math.trunc((this.endDate - this.now)/1000) % 60      return s>9?s:'0'+s;    }  },  watch : {    endDate : {      immediate : true,      handler(newVal){        if(this.timer){          clearInterval(this.timer)        }        this.timer = setInterval(()=>{          this.now = new Date()          if(this.negative)            return          if(this.now > newVal){            this.now = newVal            this.$emit('endTime')            clearInterval(this.timer)          }        }, 1000)      }    }  },  beforeDestroy(){    clearInterval(this.timer)  }}</script>