# 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.

- URL: https://laravel-vuejs.space/format-money-vue-laravel
- Author: Anass Ez-zouaine (https://laravel-vuejs.space/author/anass-ez-zouaine)
- Published: 2026-10-11
- Topics: Laravel, VueJs, PHP

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](https://laravel-vuejs.space/laravel-api-resources-vue) 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 `float` column for money.
>
> **Who it's for:** Laravel + Vue developers
>
> **Applies to:** Laravel 13 · Vue 3

## The fix

```php
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

**Q: 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.

**Q: 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.