Frontend Guide

Vue.js World Clock Component

Build a robust Digital Clock component in Vue.js. Instead of relying on `new Date()`, which uses the user's potentially incorrect system clock, initialize your timer with our API's accurate timestamp.

VUE.JS

<script setup>
import { ref, onMounted } from 'vue'

const timeInfo = ref(null)

onMounted(async () => {
  const res = await fetch('https://time.now/developer/api/timezone/Australia/Sydney')
  timeInfo.value = await res.json()
})
</script>

<template>
  <div v-if="timeInfo" class="clock-card">
    <h3>Sydney, Australia</h3>
    <p class="time">{{ timeInfo.datetime }}</p>
    <p class="meta">Week {{ timeInfo.week_number }}</p>
  </div>
</template>

Why use Time.Now for Frontend?

Simple integration with Composition API
Accurate Week Number data
Reliable UTC offsets

API Reference View All Guides