Vue-Moon

A Vue component to accurately display moon phases. calculations are made based on the Hijri calendar which is a moon based calendar.

🚀 Features

• 🌘 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

Installation

pnpm i vue-moon # or yarn add vue-moon

Usage

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>

Props

| 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" |

Events

Currently no events are emitted from this component

Credits

https://webspace.science.uu.nl/~gent0113/islam/ummalqura.htm