Vue 3 Get Current Date, Time and Timestamp Tutorial

Last Updated on by in Vue JS

Vue Date and Time tutorial; Date and Time are the primary values, which help identify and validate the occurrences of the event.

Every system has a particular date and Time based on the time zone etc., when we talk about the date and Time, so we have to comprehend the archetype of it particularly.

Understanding the nuances of things always gives me long-term gratification. Similarly, I would like to proliferate my learning with you so that you can align this knowledge with your brain to amplify your development skills.

A software application pattern mainly consists of client-side and server-side. In simple terms, a client-side is your current system connected to the browser, whereas the server-side is primarily referred to the backend where your REST API lies.

The client communicates with the server to exchange the information; that information can be authenticated with date and Time, it helps track or keep records intact.

In this eloquent guide, we will show you some practical methods to answer how to get the current date and Time in Vue js; this vue js date and time example will give your conscience immense gratification, especially if you are a novice in vue development.

Set Up Vue App

Here are the instructions that help you set up the vue development environment on your machine.

npm install -g @vue/cli

vue create vue-blog

cd vue-blog

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"

In this step, you will have to create a separate components.

Head over to components folder, here you have to create a new file. Name it components/DateComponent.vue and add the given code to activate the basic component.

  <h2>Vue JS 3 Date Component Example</h2>

<script setup>

Get Current Date and Time in Vue Example

In your Vue application, you can handle date and time very easily; through the help of the given code snippet, we are trying to:

1:) => Get current time in vue

2:) => Get current year in vue

3:) => Get current date in vue

4:) => Get timestamp in vue

5:) => Get full date and time with the time zone in vue

First, you have to create a new component file in the components folder, then add the provided code in the file to print the date and time and show it on the browser.

        <h2 class="text-center mb-3">Vue Get Full Date and Time Example</h2>
        <ul class="list-group">
          <li class="list-group-item" v-show="timestamp"><strong>Timestamp:</strong> {{ timestamp }}</li>
          <li class="list-group-item" v-show="date"><strong>Date:</strong> {{ date }}</li>
          <li class="list-group-item" v-show="time"><strong>Time:</strong> {{ time }}</li>
          <li class="list-group-item" v-show="year"><strong>Current Year:</strong> {{ year }}</li>
          <li class="list-group-item" v-show="fulldatetime"><strong>Full Date:</strong> {{ fulldatetime }}</li>

    export default {
        name: "DateComponent",
        data: () => ({
          date: '',
          time: '',
          year: '',
          timestamp: '',
          fulldatetime: ''
        methods: {
          printDate: function () {
            return new Date().toLocaleDateString();
          printTime: function () {
            return new Date().toLocaleTimeString();
          printYear: function () {
            return new Date().getFullYear();
          printTimestamp: function () {
          printFullDate: function(){
            return new Date();
        mounted: function () {
 = this.printDate();
          this.time = this.printTime();
          this.timestamp = this.printTimestamp();
          this.year = this.printYear();
          this.fulldatetime = this.printFullDate();

Now, you have to register the DateComponent, make sure to add the component in the App.vue file:

  <div class="container mt-5 text-center">
    <DateComponent />
import DateComponent from './components/DateComponent.vue'
export default {
  name: 'App',
  components: {

Start Vue Application

The following command can be used to run the vue js application; make sure to execute the command from the terminal to view the app on the browser.

npm run serve

After successfully starting the application, you will see the following output, and we are sure it will give you an immense feeling of gratification.

Get Date time in Vue


Through, this guide you must have understood how to get the current date in MM/DD/YYYY format, how to get the only current time, and how to get an only current year.

We hope we have been less peculiar in persuading the concept; getting the current date and time in vue js is extremely easy and less time-consuming.

Digamber - Author

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.