Vue Formatters
useFormatters
Composable per formattazione valori con locale italiano.
Panoramica
@pzeta/vue-formatters espone un composable con funzioni pure di formattazione per il locale italiano. Zero dipendenze, zero stato reattivo — le funzioni ricevono un valore e restituiscono una stringa.
null e undefined restituiscono sempre stringa vuota (nessun errore).
Installazione
npm install @pzeta/vue-formatters
Utilizzo
import { useFormatters } from '@pzeta/vue-formatters'
const { formatCurrency, formatDate, formatPercent, formatNumber, formatFileSize,
formatCodiceFiscale, formatPartitaIva, formatPhone } = useFormatters()
Riferimento funzioni
formatCurrency
formatCurrency(value: number | null | undefined, currency?: string): string
| Input | Output |
|---|---|
1234.56 | "1.234,56 €" |
1234.56, 'USD' | "1.234,56 US$" |
null | "" |
Default: currency = 'EUR'. Usa Intl.NumberFormat('it-IT'). Per valute non standard cade su "{currency} {numero}".
formatDate
formatDate(date: string | Date | null | undefined, format?: 'short' | 'long' | 'datetime'): string
| Format | Input | Output |
|---|---|---|
'short' (default) | '2024-03-15' | "15/03/2024" |
'long' | '2024-03-15' | "15 marzo 2024" |
'datetime' | '2024-03-15T10:30:00' | "15/03/2024, 10:30" |
| — | null | "" |
Accetta stringhe ISO e oggetti Date. Se la data non è valida restituisce "Data non valida".
formatNumber
formatNumber(value: number | null | undefined, decimals?: number): string
| Input | Output |
|---|---|
1234.5678 | "1.234,57" (2 decimali default) |
1234.5678, 0 | "1.235" |
1234.5678, 4 | "1.234,5678" |
formatPercent
formatPercent(value: number | null | undefined, decimals?: number): string
| Input | Output |
|---|---|
15.5 | "15,5%" (1 decimale default) |
15.555, 2 | "15,56%" |
100 | "100,0%" |
formatFileSize
formatFileSize(bytes: number | null | undefined): string
| Input | Output |
|---|---|
0 | "0 Bytes" |
1536 | "1,50 KB" |
1048576 | "1,00 MB" |
1073741824 | "1,00 GB" |
formatCodiceFiscale
formatCodiceFiscale(cf: string): string
| Input | Output |
|---|---|
'RSSMRA80A01H501U' | "RSSMRA 80A01 H501U" |
| Stringa ≠ 16 char | Input inalterato |
formatPartitaIva
formatPartitaIva(piva: string): string
| Input | Output |
|---|---|
'12345678901' | "1234567 8901" |
| Stringa ≠ 11 char | Input inalterato |
formatPhone
formatPhone(phone: string): string
| Pattern | Input | Output |
|---|---|---|
| Mobile +39 | '+393331234567' | "+39 333 123 4567" |
| Mobile senza prefisso | '3331234567' | "333 123 4567" |
| Fisso | '0123456789' | "012 345 6789" |
| Altro | qualsiasi | Spazi rimossi |
Esempio in template
<script setup lang="ts">
import { useFormatters } from '@pzeta/vue-formatters'
const { formatCurrency, formatDate } = useFormatters()
</script>
<template>
<td>{{ formatCurrency(row.importo) }}</td>
<td>{{ formatDate(row.datacreazione, 'long') }}</td>
</template>