How To Use Custom Countdown Timer For Vue 3?

If you want to know how to easily customize the custom countdown timer for Vue 3? Please read this article! There is the custom countdown timer for Vue 3 which can be easily customized without any NPM plugin and jQuery.

Step 1: Components

<template>
    <div class="coming-soon-area">
        <div class="container">
            <div class="coming-soon-content">
                <div class="d-table">
                    <div class="d-table-cell">
                        <h2>Coming Soon</h2>
                        <div class="timer flex-wrap justify-content-center d-flex">
                            <div
                                id="days"
                                class="time align-items-center flex-column d-flex justify-content-center"
                            >
                                <h3>{{days}}</h3>
                                <p>Days</p>
                            </div>
                            <div
                                id="hours"
                                class="time align-items-center flex-column d-flex justify-content-center"
                            >
                                <h3>{{hours}}</h3>
                                <p>Hours</p>
                            </div>
                            <div
                                id="minutes"
                                class="time align-items-center flex-column d-flex justify-content-center"
                            >
                                <h3>{{minutes}}</h3>
                                <p>Minutes</p>
                            </div>
                            <div
                                id="seconds"
                                class="time align-items-center flex-column d-flex justify-content-center"
                            >
                                <h3>{{seconds}}</h3>
                                <p>Seconds</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 

Step 2: JS

<script>
export default {
    name: 'ComingSoonPage',
    data() {
        return {
            days: '',
            hours: '',
            minutes: '',
            seconds: ''
        }
    },
    created() { // Turn data into viewable values
        setInterval(() => {
            this.commingSoonTime();
        }, 1000);
    },
    methods: {
        commingSoonTime() {
            let endTime = new Date("December 5, 2025 17:00:00 PDT");            
            let endTimeParse = (Date.parse(endTime)) / 1000;
            let now = new Date();
            let nowParse = (Date.parse(now) / 1000);
            let timeLeft = endTimeParse - nowParse;
            let days = Math.floor(timeLeft / 86400);
            let hours = Math.floor((timeLeft - (days * 86400)) / 3600);
            let minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
            let seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
            if (hours < "10") { hours = "0" + hours; }
            if (minutes < "10") { minutes = "0" + minutes; }
            if (seconds < "10") { seconds = "0" + seconds; }
            this.days = days;
            this.hours = hours;
            this.minutes = minutes;
            this.seconds = seconds;
        }
    }
}
</script>

Step 3: CSS

<style lang="scss" scoped>
.d-table {
    width: 100%;
    height: 100%;
 
    &-cell {
        vertical-align: middle;
    }
}
.coming-soon-area {
    width: 100%;
    height: 100%;
    background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg');
    background-size: cover;
    background-position: center center;
}
.coming-soon-content {
    height: 100vh;
    text-align: center;
    padding: {
        left: 30px;
        right: 30px;
    };
    .logo {
        display: inline-block;
    }
    h2 {
        font-size: 70px;
        color: #f9f9f9;
        margin: {
            top: 30px;
            bottom: 0;
        };
    }
    .timer {
        margin-top: 35px;
 
        .time {
            width: 220px;
            height: 220px;
            border-radius: 5px;
            background-color: #f9f9f9;
            margin: {
                left: 10px;
                right: 10px;
            };
            h3 {
                color: #cf3030;
                font: {
                    size: 50px;
                    weight: 700;
                    style: italic;
                };
            }
            p {
                display: block;
                margin-top: -2px;
                color: #000;
                font: {
                    size: 20px;
                    weight: 500;
                };
            }
            &:first-child {
                margin-left: 0;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
</style>

That’s all. If you have any queries, then let me know in the comment section.