How can a Vuetify 3 app determine what the local currency is when the app is run?

Question

I am working in Vue 3 and Vuetify 3.

I would like my app to use the local currency symbol based on wherever it is running. If the app is running in the US, I want it to use the dollar sign, if it is in Europe, I want it to use the euro sign, etc.

1. How can my app determine the locale?
2. How can my app determine the currency symbol for that locale?
3. How can I write my app so that all components that need to display a currency symbol display the local one?

I've never done and localization/internationalization with Vue/Vuetify though I did dabble with it from time to time in Java several years back. How is all this handled in Vue/Vuetify?

Answer 1

A given locale might use more than one currency, so there is no built-in method to derive a single currency symbol for a locale — for that you'll have to implement a mapping of locales to symbols that meets your project's requirements. (Asking for recommendations for such a third-party library is not on-topic for Stack Overflow — although you might find ISO 4217 to be a useful resource).

To resolve the default locale for a runtime using the Intl API, you can use new Intl.NumberFormat().resolvedOptions().locale as demonstrated in this question.

const defaultLocale = new Intl.NumberFormat().resolvedOptions().locale;

console.log(defaultLocale);