I have an app that I’m writing in Vue 3 and Vuetify 3. It has multiple components, all of which display monetary amounts. I want the monetary amounts to display in the format that is appropriate to the locale where the app is running so that it appears as $1,234.56 in the US and 1 234,56 plus a currency symbol in countries that use that format.

I’ve already got the code to figure out the locale and the proper formatting of the monetary amounts and it works fine. The code basically looks up the locale, determines a country code, finds the “alpha3code” and then formats the amount. This code is essentially calculating some constants which will have the exact same value for every component in the app so it seems redundant and inefficient to execute this code for each of the different components.

I’m still relatively new to Vue/Vuetify so I’m hoping there is someway to execute this code ONCE, then share the information found with each of the components but I’m not sure what that way is.

Can anyone suggest a way or ways to do what I want?