In the examples below, we write it in the template. It’s up to you to wrap it in functions to making it reusable.

<template>
{{ your js here }}
</template>

Get current full date

get full date time with timezone

new Date()

Get current time or timestamp number

Date.now() 

new Date().getTime()

Get current date in a dd/mm/yyyy

new Date().toLocaleDateString()

Get current date in a dd/mm/yyyy hh:mm:ss

new Date().toLocaleString()

Get current time in 12 hour format

new Date().toLocaleTimeString('en-US', { hour12: true })

these are some common time formats that can be used, it’s basically JavaScript, check out this page for more.

Reactive timestamp

To get a reactive timestamp, you can use useTimestamp from vueuse. Check out the docs to learn more about the usage.

1770677738985
2/9/2026, 10:55:38 PM ✨ magic

<template>
{{ timestamp }} <br>
{{ formattedTimestamp }}
</template>

<script setup lang='ts'>
import { useTimestamp } from '@vueuse/core'

const timestamp = useTimestamp() 

// do any other logic with computed property
const formattedTimestamp = computed(() => {
  const date = new Date(timestamp.value)
  return date.toLocaleString()
})

</script>

Happy coding! 💖