Skip to content

Fallbacking

fallbackLocale: '<lang>' to choose which language to use when your preferred language lacks a translation.

Explicit Fallback

vue
<!-- src/App.vue -->
<script lang="ts" setup>
import { watch } from 'vue';
import { useLocaler } from 'vue-localer';
import { useNavigatorLanguage } from '@vueuse/core';

const { lang, langs } = useLocaler();
const { language } = useNavigatorLanguage();

watch(
  language,
  (val) => {
    if (val) {
      const _language = localStorage.getItem('language');

      if (_language) {
        lang.value = _language;
        return;
      }

      // Select the closest language from the available language list as the current language.
      const found = langs.value.find((item) => item.startsWith(val) || val.startsWith(item));

      if (found) {
        lang.value = found;
        return;
      }
    }
  },
  { immediate: true },
);
</script>

Released under the MIT License.