Vue 3 Analog Clock Component

A simple analog clock component for Vue 3.

Description

This package provides a Vue 3 component to display an analog clock. It's lightweight, customizable, and easy to integrate into your Vue 3 projects.

Usage

Install the package via npm:

npm install vue3-analog-clock

or go to npm package link

Import the component and register it in your main.js or main.ts file:

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

const app = createApp(App);

app.use(AnalogClock);

app.mount("#app");

Use the component in your Vue templates:

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

Demo

Default Analog Clock

Customize Analog Clock

Customization Options

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

• watchFaceBackground: Background color of the clock face. Default: #f9f9f9.
• watchDigitsColor: Color of the clock digits. Default: #000000.
• watchDigitsMinuteMarksColor: Color of the minute marks on the clock face. Default: #929394.
• watchHoursHand: Color of the hour hand. Default: #232425.
• watchMinutesHand: Color of the minute hand. Default: #343536.
• watchSecondsHand: Color of the seconds hand. Default: #c00.

To customize the clock colors, simply pass the desired color values as props when using the component in your Vue templates:

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

🌱 Contributors

Keywords

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

License

This package is licensed under the MIT License