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

I want to do a simple countdown from 10 to 0

I found solution online using normal javascript but let say I want to do it in Vue . The solution in Jquery

Create a simple 10 second countdown

<template>
   {{ countDown }}

</template>

<script>
  export default {
    computed: {
       countDown() {
         // How do i do the simple countdown here?
       }

    }

  }

</script>

How do I recreate the same functionality in Vue.js?

Thanks

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>

How to Create an Animated Countdown Timer With Vue, In your function apply the safety and decrement as needed. vue-countdown. Component for Vue.js which creates a countdown timer based on a provided number of seconds or a date in the future. Take a look at the example below. Example. To start working the Countdown component use the following command to install it. $ yarn add npm install @dmaksimovic/vue-countdown. If used as a local component

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.

Simple Countdown Timer Vue Component, Get started. Vue.js Developers Let's start by creating a basic template for our timer. let seconds = timeLeft % 60 // If the value of seconds is less than 10, Countdown Timer Vue Component. Simple Vue.js timer component. Gets start and end time of an event and calculates the status according to now. All the words and texts are coming from a JSON string form html attribute of "trans", so that they could be changed to any desirable language.

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>

Timer Component for Vue.js - DEV, Countdown Timer Vue Component. Simple Vue.js timer component. color: #fff; text-align:center; margin-top: 50px; .day, .hour, .min, .sec { font-size: 270px; margin: 10px auto; padding: 8px 0; font-weight: 500; color: #000; seconds:"", message:"", statusType:"", statusText: "", }; }, created: function () { this. This will create a simple component that will output countdown that starts from 10 and counts until 0. Options. seconds - number of seconds to start counter from (type number) date - date in future as a string. Any string that can be parsed by Date.parse() is considered valid. Takes precedence over seconds parameter

So essentially doing it in vue.js, is the same as doing it in JS. You could follow many paths but the way I would do is as below

<template>
    {{ countDown }}
</template>

<script>
    export default {
    created() {
        window.setInterval(autoIncrementTimer, 1000)
    },
    methods() {
        autoIncrementTimer() {
            if (this.timerCount =< 0) {
                return
            }
            timerCount -= 1;
        }
    }
    data() {
        return {
               timerCount: 0;
        }
    },
}

</script>

In order to do this as a computed property, you would need to write a get and set function, and overall computed props seem like an overkill for this task.

To summarise:

  1. Create a variable in data, to store the current value.

  2. On Component Create() use window.setInterval to created a recurring function and interval time.

  3. In your function apply the safety and decrement as needed.

As you can see, the <script> above is actually vanilla js.

Vue js time countdown, Create a simple timer component using Vue.js. Tagged with vue This is perhaps optional, as the default is to count down every second. A Not Fancy Countdown Timer with vue.js. A simple, not fancy at all, Countdown Timer. Part of the #NotFancyAppChallenge. See all 7 posts →

Make it a component so you can re-use it.

<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <script>
        Vue.component('counter', {
            template: '<button v-on:click="countDownTimer()">{{ countDown }}</button>',
            data: function () {
                return {
                    countDown: 10,
                    countDownTimer() {
                        if (this.countDown > 0) {
                            setTimeout(() => {
                                this.countDown -= 1
                                this.countDownTimer();
                            }, 1000)
                        }
                    }
                }
            }
        })

        const app = new Vue({
            el: '#app'
        })
    </script>
</body>

fengyuanchen/vue-countdown: Countdown component for , Hi , i'm new to vue js and want to make minute and second timer and output as 10 min 59 sec remaining and decrementing sec and min. EasyTimer.js is a simple library for counting time in five different units: tenth of seconds, seconds, minutes, hours and days. It has interesting features: The refresh interval can be configured in tenth of seconds, seconds, minutes and hours. Dispatches events when timer starts, stops, pauses and when every type of unit changes.

Vuejs countdown, Countdown component for Vue.js. Contribute to fengyuanchen/vue-countdown development by creating an account fengyuanchen.github.io/vue-countdown/ days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds. forEach(([key, value]) => { // Adds leading zero const digits = value < 10 ? This Video will show how to Create Countdown Timer Animation in Microsoft Powerpoint. *****DOWNLOAD Link is for Channel Members Only *****

Moving Animated Countdown Timer from Vanilla JavaScript to a , About Modular Scale. Modular Scale helps build a list of values based on a consistent relationship (think of things like the golden ratio or musical increments) . Vue.js / Webpack build “index.html” using a “static” subdomain for CSS and JS To achieve this you would need to use webpack publicPath You can configure webpack to build index.html using a different subdomain, webpack.config.js import webpack from 'webpack'; export default { output: { ..

Countdown Timer using Vue.js - JSFiddle, Here's the same timer we created together in the last post, but in Vue. Here's the basic structure we need for that: for when the top layer should change colors (orange at 10 remaining seconds and red at five seconds). That’s why in this article, I want to show you how to build a simple Vue.js app with Bootstrap and REST API in 5 minutes, similar to how I did with the React.js app in one of the previous articles.

Comments
  • when do want the countdown to start?
  • For people seeing this answer for the first time; it is a good solution and deserves the upvotes it has recieved. However, the answer I have posted below achieves the same in a slightly simpler, and more reactive, way using watch. If you are looking to implement a timer, then I would strongly recommend utilising watch instead of creating unnecessary methods, and then subsequent hooks.
  • Just out of curiosity, is there a reason why setInterval is not a better approach?
  • Agreed, this is a much more Vue way to do it as well as being able to reset the timer easily to re-trigger the process attached to it, this is the better answer IMO.
  • @DrCord - For the sake of other's finding this when searching online, it should really be the accepted answer as it negates the need for unnecessary methods and hooks, not to mention, it is more reactive and utilises the built in Vue functionality as it is meant to be used.
  • Countdown is not linear at the beginning.