In this tutorial, we'll build a lightweight, reusable Vue.js component that displays the current time in any specified timezone. This component will automatically update every second and handle timezone conversions seamlessly.
Prerequisites
Basic knowledge of Vue.js
Node.js and npm installed
Vue 3 with Composition API
Step 1: Set Up a New Vue Project
First, let's create a new Vue project using Vite:
npm create vite@latest timezone-clock -- --template vue
cd timezone-clock
npm install
Step 2: Install Required Dependencies
We'll use dayjs for timezone handling:
npm install dayjs
Understanding Timezone Handling
Before we dive into the code, let's break down why we need additional libraries for timezone management:
JavaScript's native Date object doesn't provide robust timezone conversion
dayjs with its UTC and timezone plugins allows easy, accurate timezone transformations
The plugins extend dayjs's capabilities to parse, manipulate, and display times across different timezones
Step 3: Create the Timezone Clock Component
Create a new file TimezoneClock.vue in your src/components directory:
<script setup>
import { computed, ref, onBeforeUnmount } from 'vue';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import dayjsTimezone from 'dayjs/plugin/timezone';
const props = defineProps({
timezone: {
type: String,
required: true,
},
});
dayjs.extend(utc);
dayjs.extend(dayjsTimezone);
const currentTime = ref(new Date());
const updateCurrentTime = () => {
currentTime.value = new Date();
};
const formattedTime = computed(() =>
dayjs(currentTime.value).tz(props.timezone).format('h:mm a z')
);
const updateTimeInterval = setInterval(updateCurrentTime, 1000);
onBeforeUnmount(() => {
clearInterval(updateTimeInterval);
});
</script>
<template>{{ formattedTime }}</template>
Key Concepts Explained
1. Props and Component Configuration
defineProps() creates a prop called timezone
required: true ensures a timezone must be provided when using the component
Prop is typed as a String to accept timezone names like "America/New_York"
2. Reactive Time Management
ref(new Date()) creates a reactive reference to the current time
updateCurrentTime() updates this reference
setInterval() calls this function every second, creating a "live" clock
4. Cleanup with onBeforeUnmount
Step 4: Using the Component
In your App.vue, demonstrate the component:
<script setup>
import TimezoneClock from '@/components/TimezoneClock.vue';
</script>
<template>
<div>
<div>
<h1>World Clocks</h1>
New York: <TimezoneClock timezone="America/New_York" />
<br />
<br />
London: <TimezoneClock timezone="Europe/London" />
<br />
<br />
Tokyo: <TimezoneClock timezone="Asia/Tokyo" />
</div>
</div>
</template>
Advanced Tips
Always use IANA timezone names (like "America/New_York")
Handle potential timezone name errors with a default fallback
Consider adding props for custom date formatting
Conclusion
You've now created a flexible, reactive timezone clock component in Vue.js. By leveraging dayjs and Vue's Composition API, we've built a powerful time display solution that's both performant and easy to use.
Learning Challenges
Add a prop to customize the time format
Implement error handling for invalid timezones
Create a timezone selector feature
Happy coding! 🕒✨