I18n

This module provides helper functions to facilitate the loading of translations messages and the state of this.

The setup of i18n needs to be in place to be able to use this modules functions.

Dependencies

vue-i18n: 11.x.x

Usage

After the initialization of i18n, register the messageLoader to enable automatic loading of the translations based on the current locale.

How you fetch the translations is up to you, but the function should return a Promise that resolves to an object with the translations. See the TS Docs within your editor for more type information.

import { createI18n } from "vue-i18n";
import { registerI18nMessageLoader } from "@xerius/codey-core/modules/i18n";
import { fetchTranslations } from "./api/translations.api"; // <- your own implementation

// main.ts
const i18n = createI18n({
  legacy: false,
  locale: "nl-be",
  fallbackLocale: "nl-be",
  globalInjection: true,
});
registerI18nMessageLoader(i18n, fetchTranslations);

useI18nMessagesAvailable

In order to know if the translations are available, you can use the useI18nMessagesAvailable composable. This will return a ref that will be true when the translations are available for your current locale.

This can be combined with your config state to provide a global loading state for your application.

vue

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useI18nMessagesAvailable } from "@xerius/codey-core/modules/i18n";
import { storeToRefs } from "pinia";
import { useConfigStore } from "./stores/config.store";
import { getApiPathBase } from "@/api/get-api-path-base"; // <- different for Front-office vs back-office

const configStore = useConfigStore();
const { config } = storeToRefs(configStore);

const messagesAvailable = useI18nMessagesAvailable();
const appLoading = computed(() => !messagesAvailable.value || !config);

onMounted(async () => {
  await configStore.loadConfig(getApiPathBase());
});
</script>

<template>
  <TheApplicationShell>
    <FullPageLoading v-if="appLoading" />
    <RouterView v-else />
  </TheApplicationShell>
</template>

Translations API

In order to fetch the translations from the bff it requires a translation api route with the following signature:

// where locale can be: nl-be, fr-be
/api/aailnnorsstt / { locale };

The bff then needs to consider the following:

Call the Xerius.Translation api and return the translations for the given language.
The mapping to the Xerius.Translation api should contain your application name so the bff doesn't expose this to the frontend client for example: translation/api/v2/Translation/viaxerius/{lang}.
Request and setup the correct scopes access to access the translation api. For more information check out the scopes described in the documentation.

Changing the locale

For examples how to change the locale, have a look at the starter applications where examples are available.

For more information:

I18n ​

Dependencies ​

Usage ​

useI18nMessagesAvailable ​