Vue 3 Analog Clock Component

A simple analog clock component for Vue 3.

📦 Installation

Install the package via npm:

npm install @madhusha_99/vue3-analog-clock

or visit the npm package page

---

🚀 Usage

Import the component in your main.js or main.ts

import { createApp } from "vue";
import App from "./App.vue";
import AnalogClock from "@madhusha_99/vue3-analog-clock";
import "@madhusha_99/vue3-analog-clock/dist/style.css";

const app = createApp(App);
app.use(AnalogClock);
app.mount("#app");

Use the component in your template

<template>
  <div>
    <AnalogClock />
  </div>
</template>

---

🎨 Customization Options

You can customize the appearance of the analog clock component using the following props:

Prop	Description	Default
watchFaceBackground	Background color of the clock face	#f9f9f9
watchDigitsColor	Color of the clock digits	#000000
watchDigitsMinuteMarksColor	Color of minute marks	#929394
watchHoursHand	Hour hand color	#232425
watchMinutesHand	Minute hand color	#343536
watchSecondsHand	Seconds hand color	#c00

Example

<template>
  <div>
    <AnalogClock
      watchFaceBackground="#673F69"
      watchDigitsColor="#FFFFFF"
      watchDigitsMinuteMarksColor="#FFFFFF"
      watchHoursHand="#FFAF45"
      watchMinutesHand="#FB6D48"
      watchSecondsHand="#E72929"
    />
  </div>
</template>

---

🧪 Demo

Default Analog Clock

Customized Analog Clock

---

🌱 Contributors

---

🔑 License

This package is licensed under the MIT License

---

🔍 Keywords

Vue, Vue 3, Analog Clock, Clock Component, Vue Component