💸 Use Money 💰

Installation

Install the @ossph/use-money package using npm or yarn:

npm install @ossph/use-money

or

yarn add @ossph/use-money

Money Component

Importing the Component

To use the Money component, import it as follows:

import { Money } from '@ossph/use-money';

Example Usage

Use the Money component in your Vue templates as follows:

<template>
  <div>
    <Money :input="123456.78" />
  </div>
</template>

<script>
import { Money } from '@ossph/use-money';

export default {
  components: {
    Money
  }
};
</script>

Props API

The Money component accepts the following props:

Prop Name	Type	Default	Description
input	Number/String		The input money value to be formatted.
symbol	String	'$'	The currency symbol.
symbolStyles	Object	{}	CSS styles for the currency symbol.
symbolClasses	Array	[]	CSS classes for the currency symbol.
textStyle	Object	{}	CSS styles for the text.
showSymbol	Boolean	false	Whether to show the currency symbol.
showFractional	Boolean	false	Whether to show the fractional part of the money value.

Money Composable

Importing the Composable

To use the useMoney composable, import it as follows:

import { useMoney } from '@ossph/use-money';

Example Usage

Use the useMoney composable in your Vue composition functions as follows:

<template>
  <div>
    <p>Formatted Money Value: {{ formattedMoney }}</p>
  </div>
</template>

<script>
import { useMoney } from '@ossph/use-money';

export default {
  setup() {
    const { moneyValue } = useMoney(123456.78);
    
    return {
      formattedMoney: moneyValue
    };
  }
};
</script>

Composable API

The useMoney composable takes the following parameters:

Prop Name	Type	Default	Description
value	Number/String		The input money value to be formatted.
options	Object	{ showFractional: true, showSymbol: true, symbol: '$' }	Formatting options for money value.
showFractional	Boolean	true	Whether to show the fractional part of the money value.
showSymbol	Boolean	true	Whether to show the currency symbol.
symbol	String	'$'	The currency symbol.

It returns an object with the following properties:

Property	Type	Description
moneyValue	String	The formatted integer part of the money value.
moneyFractional	String	The original fractional part.
moneySymbol	String	The currency symbol.
moneyConcatenated	String	The concatenated value with the currency symbol.