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