How To Create A Clock In Vue.js

In this article, we will learn how we can create a clock in Vue.js applications.

You can check my previous articles on Vue.js from the below mentioned links. 

• Overview Of Vue.js
• Create VueJS Project Using Vue UI
• How To Fetch Data From WEB API In Vue.js Application

Prerequisites

• We should have basic knowledge of HTML and Vue.js 
• Visual Studio Code editor

Create VueJS Project

Create a Vue.js project by using the following command.

vue create clockdemo

Open the newly created project in Visual Studio code and Install vue clock library by using the following command:

npm install vue-clock2

Now open this project in Vs code and install bootstrap.

npm install bootstrap-vue bootstrap --save

Now open the main.js file and import bootstrap reference.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Now right click on the components folder and add a new component named 'clockdemo.vue'. Now open clockdemo.vue component and add the following code.

<template>
  <div id="app">
     <div class="row" style="margin:10px">    
    <div class="col-sm-12 btn btn-info">    
    How To Create A Clock In Vue.js
    </div>    
  </div> 
  <div class=" row col-sm-12">
  <div class="col-sm-4"></div>
  <div class="col-sm-4"> 
  <clock size="300px" color="#FFFFFF" bg="#0dcaf0"></clock> <br>
  </div>
  <div class="col-sm-4"></div>
  </div>
  <br><br>
  </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'  
import 'bootstrap-vue/dist/bootstrap-vue.css'
 import Clock from 'vue-clock2';
export default {  
  name: 'Clockdemo',
   components: { Clock },
     data () {
      return {
          time: '11:40'
      }
    },

}
</script>
<style>
</style>

Now open App.vue component and import the clockdemo component. add the following code in App.vue component.

<template>
  <div id="app">
  <Clockdemo/>
  </div>
</template>

<script>
import Clockdemo from './components/clockdemo.vue'

export default {
  name: 'App',
  components: {
    Clockdemo
  }
}
</script>

<style>

</style>

Now run the application by using 'npm run serve' command and check.

We can change the design of the clock. Add the following code in the clockdemo.vue component.

<template>
  <div id="app">
     <div class="row" style="margin:10px">    
    <div class="col-sm-12 btn btn-info">    
    How To Create A Clock In Vue.js
    </div>    
  </div> 
  <div class=" row col-sm-12">
  <div class="col-sm-2"></div>
  <div class="col-sm-8"> 
<clock border="none" bg="radial-gradient(circle, #25cff2, #fffbe1, #25cff2)"></clock>
  </div>
  <div class="col-sm-2"></div>
  </div>
  <br><br>
  </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'  
import 'bootstrap-vue/dist/bootstrap-vue.css'
 import Clock from 'vue-clock2';
export default {  
  name: 'Clockdemo',
   components: { Clock },
     data () {
      return {
          time: '11:40'
      }
    },
}
</script>
<style>
</style>

Now run the application by using 'npm run serve' command and check.

Summary

In this article, we learned how to create a clock in Vue.js applications.