Utils Function
Currency Format
currency.ts
export function currency(amount: number, fraction = 2, currencyCode = "USD") {
return new Intl.NumberFormat(undefined, {
style: "currency",
currency: currencyCode,
currencyDisplay: "narrowSymbol",
maximumFractionDigits: fraction,
}).format(amount);
}
export function formatK(amount: number, fraction = 1, currencyCode = "USD") {
return new Intl.NumberFormat(undefined, {
style: "currency",
notation: "compact",
compactDisplay: "short",
currency: currencyCode,
maximumFractionDigits: fraction,
}).format(amount);
}
Date Format
dateFormat.ts
import { useDateFormat } from "@vueuse/core";
export function dateFormat(date: Date | string, formatString = "DD MMM YYYY") {
const formatted = useDateFormat(new Date(date), formatString);
return formatted.value;
}
Phone Number Format
libPhoneNumber.ts
import { CountryCode, parsePhoneNumberFromString } from "libphonenumber-js";
export function formatPhoneNumber(number: string, country: CountryCode = "US") {
const phoneNumber = parsePhoneNumberFromString(number, country);
if (phoneNumber) return phoneNumber.formatInternational();
return null;
}
CSS Merger & Priorities Function
utils.ts
import type { Ref } from "vue";
import type { Updater } from "@tanstack/vue-table";
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function valueUpdater>(
updaterOrValue: T,
ref: Ref
) {
ref.value =
typeof updaterOrValue === "function"
? updaterOrValue(ref.value)
: updaterOrValue;
}