Vue-moon NPM | npm.io

Vue-Moon

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

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"