People searching “format money Vue Laravel” add two prices in the component with +. Binary floats make that wrong. Store integer cents. Format once on the server. The API resource guide is the same idea for other fields: the page receives what it should print.
TL;DR
- Store integer cents.
- Format with Number::currency on the server and pass a string.
- Do not add money in JavaScript.
- Do not use a
floatcolumn for money.
The fix#
use Illuminate\Support\Number;
'price' => Number::currency($order->total_cents / 100, in: 'USD'),total_cents is an integer column. The Vue page prints price and does not parse it back into a number to add tax. Tax is another integer on the server.
What to avoid#
Gotcha
Do not use a float column for money. Do not send cents to the browser and format them with string concatenation. Number::currency uses the intl extension, so a missing extension is a deploy problem, not a Vue problem. Do not install a second currency package in the starter kit for one label.
FAQ#
How do I format money before it reaches Vue?
Store integer cents. Format with Number::currency on the server and pass a string. Do not add money in JavaScript.
What goes wrong with format money Vue Laravel?
Many developers add two prices in the component with +. Do not use a float column for money.
