Accurately display the moon phases
A Vue component to accurately display moon phases. calculations are made based on the Hijri calendar which is a moon based calendar.
- 🌘 Show current moon phase
- 🌖 Show a specific date moon phase (Gregorian and Soon Hijri)
- 📐 Accept a specific degree (custom calculations)
- 📅 Accept different Hijri calendars
- 🌔 Support different views (upper hemisphere and lower hemisphere)
- ✨ SVG based
Note This component is only compatible with Vue 3
pnpm i vue-moon # or yarn add vue-moon
The most basic usage is to import the component and use it directly. this will display the current moon phase based on Umm al-Qura calendar.
<template>
<Moon />
</template>
<script setup>
import { Moon } from "vue-moon";
</script>| name | description | required | type | default |
|---|---|---|---|---|
| moonSize | the size of the moon in pixels | false | number | 348 |
| lineWeight | the line width around the moon in pixels | false | number | 14 |
| moonDegree | if set the moon inner disc will rotate to that degree. useful for custom calculations | false | number | current moon phase degree (reactive) |
| flip | if set to true the moon will flip to depict the northern hemisphere view | false | boolean | false |
| date | if set, the component will calculate the moon phase base of that date | false | number | string | Date | now (reactive) |
| calendar | allow the usage of other hijri calendars | false | "islamic" | "islamic-civil" | "islamic-tbla" | "islamic-umalqura" | "islamic-rgsa" | "islamic-umalqura" |
Currently no events are emitted from this component
https://webspace.science.uu.nl/~gent0113/islam/ummalqura.htm