Alpine JS Money

Alpine JS plugin for formatting currency values in multiple languages and currencies 💸

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-money@latest/dist/cdn.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@latest/dist/cdn.min.js"></script>

With a Package Manager

npm install -D alpinejs-money

yarn add -D alpinejs-money

import Alpine from 'alpinejs'
import money from 'alpinejs-money'

Alpine.plugin(money)

Alpine.start()

Example

Basic

<div x-data="{ priceInt: 9999, priceDec: 99.99 }">
  <p x-money.en-GB.GBP="priceInt"></p>
  <p x-money.ja-JP.JPY="priceInt"></p>
  <p x-money.en-US.USD="priceInt"></p>

  <!-- Decimal -->
  <p x-money.en-GB.GBP.decimal="priceDec"></p>
  <p x-money.ja-JP.JPY.decimal="priceDec"></p>
  <p x-money.en-US.USD.decimal="priceDec"></p>
</div>

With Data Attributes

<div x-data="{ priceInt: 9999, priceDec: 99.99 }">
  <p x-money="priceInt" data-locale="en-GB" data-currency="GBP"></p>
  <p x-money="priceInt" data-locale="ja-JP" data-currency="JPY"></p>
  <p x-money="priceInt" data-locale="en-US" data-currency="USD"></p>

  <!-- Decimal -->
  <p x-money.decimal="priceDec" data-locale="en-GB" data-currency="GBP"></p>
  <p x-money.decimal="priceDec" data-locale="ja-JP" data-currency="JPY"></p>
  <p x-money.decimal="priceDec" data-locale="en-US" data-currency="USD"></p>
</div>

With Global

<div x-data="{ priceInt: 9999, priceDec: 99.99 }">
  <p x-money.global="priceInt"></p>
  <p x-money.global.decimal="priceDec"></p>
</div>

This will look for locale and currency which is on the global xMoney object.

window.xMoney = {
  locale: 'en-CA',
  currency: 'CAD',
}

With Shopify

<div x-data="{ priceInt: 9999, priceDec: 99.99 }">
  <p x-money.shopify="priceInt"></p>
  <p x-money.shopify.decimal="priceDec"></p>
</div>

This will look for Shopify.locale and Shopify.currency.active which is on the global Shopify object.

If this isn't set by default then you can set it like this.

window.Shopify = {
  locale: 'en-CA',
  currency: {
    active: 'CAD',
  },
}

With Flat Modifier

The .flat modifier only removes .00 (or ,00 for some locales) when the value is a whole number.

<div x-data="{ priceInt: 6010 }">
  <!-- £60.10 -->
  <p x-money.en-GB.GBP="priceInt"></p>

  <!-- £60.10 (It doesn't make sense to remove `.10` here) -->
  <p x-money.en-GB.GBP.flat="priceInt"></p>
</div>