How to retrieve actually used locale after fallback?

[downace]

I'm using navigator.language to retrieve user locale. Some browsers returns a language code with territory, e.g. ru-RU. Thanks to the implicit fallback, I can only define messages for two-character locales (ru).

But useI18n().locale still returns full locale code (ru-RU), so I can't use it, for example, to show user their current locale

export default createI18n({
  fallbackLocale: 'en',
  locale: navigator.language,
  messages: {
    ru: {
      Hello: 'Привет',
      ru: 'Русский',
      en: 'English',
    },
    en: {
      Hello: 'Hello',
      ru: 'Русский',
      en: 'English',
    },
  },
});

<template>
🌐 {{ t(locale) }} <!-- Renders `ru-RU` instead of `Русский` in some browsers -->
</template>
<script setup>
const { t, locale } = useI18n();
</script>

In this simple case I can just trim locale to two characters (.slice(0, 2)). But in more complex cases I will have to re-implement entire fallback decision logic, or define translation for every possible locale.

Is there a way to somehow reuse fallback decision logic?

[downace]

I forgot that I can use navigator.languages instead of navigator.language 🤦‍♂️

Found this package which picks the most suitable navigator.languages locale amongst available app locales: preferred-locale. Then I don't have to worry about "unknown" locales.

import preferredLocale from 'preferred-locale';

const messages = {
  ru: {
    Hello: 'Привет',
    ru: 'Русский',
    en: 'English',
  },
  en: {
    Hello: 'Hello',
    ru: 'Русский',
    en: 'English',
  },
};

const locale = preferredLocale(Object.keys(messages), 'en');

export default createI18n({
  fallbackLocale: 'en',
  locale, // always 'en' or 'ru'
  messages,
});