Vue-Moon - Accurately display the moon phase

Accurately display the moon phases

NPM version NPM Downloads

GitHub stars

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


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.

  <Moon />

<script setup>
  import { Moon } from "vue-moon";


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



View Github