I18n Site Config Data Is Not Reactive

[harlan-zw]

Describe the bug

When switching between i18n locales, site config such as name and description won't be updated. This is due to a limitation in Nuxt Site Config where the data isn't reactive client side.

This decision was made as it vastly simplifies the implementation but we may need to rethink this.

The workaround for now is to have locale changes trigger a server request (i.e use window.location.href)

Reproduction

No response

System / Nuxt Info

No response

[ulysse-lacour]

Can someone provide a more detailed workaround ?

[ulysse-lacour]

This is my current nooby workaround, feels like really hacky and on refresh makes the page scroll to previous position (anyone knows how to disable that on always stay to top of page ?) :

<script setup lang="ts">
const { locale: currentLocale, locales, setLocale, t } = useI18n();

const localeSwicth = (localeCode: string) => {
  setLocale(localeCode);
  // Refresh page until this is fix
  // https://github.com/harlan-zw/nuxt-seo/issues/283
  window.location.reload();
};
</script>

<template>
  <div class="locale-switcher">
    <button
      v-for="locale in locales"
      :key="locale.code"
      :class="{ active: locale.code === currentLocale }"
      @click="localeSwicth(locale.code)"
    >
      {{ locale.code }}
    </button>
  </div>
</template>

[harlan-zw]

What exact issue are you trying to work around? The description doesn't really need to be updated, should just be the title template for the site that that isn't reactive.

In which case you can just set your own using useHead

[ulysse-lacour]

It's indeed for refreshing title and description on locale change client side. But using useHead for this is kinda making the module useless it seems to me

[sadeqsheikhi]

for anyone having the same issue, i found this workaround for now, and it doesn't require forcing a page refresh in my app.vue file i have added this

const {locale, t} = useI18n()

watch(locale, () => {
  useHead({
    titleTemplate: '%s | ' + t('nuxtSiteConfig.name'),
  })
})

[harlan-zw]

Hm this should be pretty easy to implement, Ill have a think about improvements here

[harlan-zw]

This is fixed in 2.2.0