Cached Content with Vue-Router

[dmckeone]

Hello,

I'm new to fluent-vue, so disclaimer: I may be doing something really naive here. I'm seeing behaviour where $t does not appear to be reactive when using vue-router. I'm happy to produce a full example if need be, but for now I'm just checking that I'm not missing something obvious.

Problem:

If I dynamically swap languages I get "stale" content when switching routes -- as-in the pages don't re-render for the new language. I think this is because $t() returns strings instead of ref().

If I:

1. Set language to en
2. Navigate to /
3. Click button to navigate to /other
4. Click button to swap language from en to fr
5. Click button to navigate to /
6. Index page is still showing en text, even though the language is fr (appears cached)

Background:

I'm using vue-router with unplugin-vue-router to create simple routes.

I have fairly simple pages:

index.vue:

<script setup lang="ts">
import { useFluent } from "fluent-vue";

import { swapLocale, useLocale } from "@/fluent";

const { $t } = useFluent();
const { currentLocale, nextLocale } = useLocale();
</script>

<template>
  <h1>{{ $t("title") }} ({{ currentLocale }}</h1>
  <p>
    {{ $t("description") }}
  </p>
  <router-link to="/other">
    <button>{{ $t("nav-other") }}</button>
  </router-link>
  <button @click="swapLocale">Set lang={{ nextLocale }}</button>
</template>

other.vue:

<script setup lang="ts">
import { useFluent } from "fluent-vue";

import { swapLocale, useLocale } from "@/fluent";

const { $t } = useFluent();
const { currentLocale, nextLocale } = useLocale();
</script>

<template>
  <h1>{{ $t("title") }} ({{ currentLocale }}</h1>
  <p>
    {{ $t("description") }}
  </p>
  <router-link to="/">
    <button>{{ $t("nav-root") }}</button>
  </router-link>
  <button @click="swapLocale">Set lang={{ nextLocale }}</button>
</template>

The only difference is the router-link to= property, and differing translations using unplugin-fluent-vue's ExternalFluentPlugin.

What's telling for me is that currentLocale is a ref(), and it's updating correctly, but the $t() calls are stale.

Am I doing something really wrong here?

[Demivan]

Can you share contents of @/fluent file?

[Demivan]

This all looks more or less correct. This should be working. As $t is just a method, it would be re-executed next time the component is rendered.
I need to debug this. Is the repository publicly available?

[dmckeone]

I think the issue here is that $t() is not reactive -- as you say, it's just a plain JS method -- so when the only thing that's changed is the language, then the page doesn't re-render with the new content.

The code isn't publicly available -- it's just a sandbox I was building to test all this stuff out. I'll see if I can get it into a sandbox, and I'll post back here.

[Demivan]

I was able to recreate this using your code samples. Going to debug it.
Previously, fluent-vue had custom code that force reloaded components that ever called $t during render. But later I have removed it – Vue is smart enough to re-render components on locale change. I just tried calling $forceUpdate and it did not help - so the problem is not the reactivity.

[Demivan]

Found the solution, but not the cause. 🙂
If you remove const { $t } = useFluent(); from components, it should start working.

[Demivan]

Thanks for your report. You found a bug in useFluent method. Going to investigate the cause and work on this tomorrow.

[dmckeone]

Ah ok, interesting.

I did end up creating a sandbox, if you need it: https://codesandbox.io/p/sandbox/zealous-burnell-pjfm65

[dmckeone]

I've also confirmed that your solution to remove const { $t } = useFluent(); does indeed work in a fork: https://codesandbox.io/p/sandbox/patient-sea-87td5r

[dmckeone]

Also, just wanted to say thanks for the quick feedback and response. Much appreciated!