Reactive useFluent()

[niusia-ua]

Is the $t method from useFluent() reactive?

I'm developing a desktop application using Tauri. All my .ftl files are served as Tauri resources, which are stored on the user's file system when the app is installed. I'm following such an approach to not include the translation files in the application build (Tauri bundles all the frontend code and assets directly into the exe) because I expect to have a lot of them and it will impact the size of the exe.

On the frontend, I create a plugin instance with no bundles.

// src/main.ts
const pinia = createPinia();

// Use empty bundles as we will load them in the preferences store dynamically.
const fluent = createFluentVue({ bundles: [], componentTag: false });

const app = createApp(App);
app.use(pinia);
app.use(fluent);

app.mount("#app");

I load the actual resources in my Pinia state like this:

// src/store.ts
export const usePreferencesStore = defineStore("preferences", () => {
    const fluent = useFluent();
    const language = ref<Language>("en");
    watch(
      language,
      async (code) => {
        const bundle = new FluentBundle(code);

        // here is a code to load fluent resources
        const localesDirPath = await path.resolveResource(`resources/locales/${code}`);
        for (const entry of await readDir(localesDirPath)) {
          if (entry.isFile && entry.name.endsWith(".ftl")) {
            const content = await readTextFile(await path.join(localesDirPath, entry.name));
            bundle.addResource(new FluentResource(content));
          }
        }

        fluent.bundles.value = [bundle]; // override bundles
      },
      { immediate: true }, // load resources immedieatly
    );

    return { language };
});

I will receive many warning messages about missing translations, but this is okay for me. However, I expect that those missing keys will have been overridden when resources are loaded, but this is not happening.

Here is an example of a component:

<!-- src/App.vue -->
<template>
  <!-- These ARE reactive -->
  {{ $t("file") }} {{ fluent.$t("file") }} 
  <Menubar :model="menuOptions" class="rounded-none border-0" />
</template>

<script setup lang="ts">
  const fluent = useFluent();

  const menuOptions = ref<MenuItem[]>([
    {
      // These are NOT reactive.
      label: fluent.$t("file"),
      items: [
        { label: fluent.$t("open") },
        { label: fluent.$t("create") },
        { label: fluent.$t("save") },
        { label: fluent.$t("close") },
      ],
    },
  ]);
</script>

What is interesting is that, in the template tag, both global $t and fluent.$t become reactive.

So, how can I achieve reactivity using fluent.$t in the script tag?

[niusia-ua]

I investigated that the UI framework I use supports getter functions in the label definition that makes them reactive.

  const menuOptions = ref<MenuItem[]>([
    {
      label: () => fluent.$t("file"),
      items: [
        { label: () => fluent.$t("open") },
        { label: () => fluent.$t("create") },
        { label: () => fluent.$t("save") },
        { label: () => fluent.$t("close") },
      ],
    },
  ]);

If this is the correct usege of useFluent(), then I will close the discussion.
Sorry for bothering you.

[Demivan]

Don't worry about bothering me. :)
This is exactly how you should use useFluent.
The result of $t cannot be made reactive because it returns a regular string. In your first example, you were just copying those strings into menuOption ref. This is how Vue reactivity works, not something specific to fluent-vue
But $t itself will recalculate when bundles change. So you can use it everywhere you have a reactive context (computed, template, etc.)
The next example would work even if your UI framework does not support reactive getters:

  const menuOptions = computed<MenuItem[]>(() => [
    {
      label: fluent.$t("file"),
      items: [
        { label: fluent.$t("open") },
        { label: fluent.$t("create") },
        { label: fluent.$t("save") },
        { label: fluent.$t("close") },
      ],
    },
  ]);

When bundles (language) changes, menuOptions computed will recalculate.

[niusia-ua]

I got it. Thank you for your explanation.