`useLocaleHead` doesn't update on `switchLocalePath`

[mrleblanc101]

Environment

---

• Operating System: Darwin
• Node Version: v20.18.0
• Nuxt Version: 3.14.0
• CLI Version: 3.15.0
• Nitro Version: 2.10.3
• Package Manager: pnpm@9.12.2
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/eslint@0.6.1, @nuxtjs/prismic@3.4.3, @nuxtjs/i18n@9.0.0, @nuxt/image@1.8.1

• Build Modules: -

Reproduction

https://github.com/capitalenumerique/interfaceqc

Describe the bug

I'm using the LanguageSwitcher exemple:

<script setup>
const { locale, locales } = useI18n();
const switchLocalePath = useSwitchLocalePath();

const availableLocales = computed(() => {
    return locales.value.filter((i) => i.code !== locale.value);
});
</script>

<template>
    <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
        {{ locale.name }}
    </NuxtLink>
</template>

And I'm trying to implement the SEO tags using this in my app.vue:

<script setup>
const i18nHead = useLocaleHead();

useHead({
    htmlAttrs: {
        lang: i18nHead.value.htmlAttrs.lang,
    },
    link: [...(i18nHead.value.link || [])],
    meta: [...(i18nHead.value.meta || [])],
});
</script>

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>

But the lang="fr-CA" does not update for lang="en-CA", but the URL and the app locale is updated. If I refresh the page, the lang attribute is correct:

Additional context

No response

Logs

No response

[userquin]

Change the lang attribute to use a function to avoid caching the value, useHead will call it:

useHead({
    htmlAttrs: {
        lang: () => i18nHead.value.htmlAttrs.lang, // <== THIS LINE
    },
    link: [...(i18nHead.value.link || [])],
    meta: [...(i18nHead.value.meta || [])],
});

[mrleblanc101]

@userquin Thank you, will do. I see you closed as completed without linking to a commit, does this mean the documentation has been (or will be) updated ?

[userquin]

oh, can you send the link to the docs?

[userquin]

In fact, you should return the entire entry:

useHead(() => ({
    htmlAttrs: {
        lang: i18nHead.value.htmlAttrs.lang,
    },
    link: [...(i18nHead.value.link || [])],
    meta: [...(i18nHead.value.meta || [])],
}));

[mrleblanc101]

Everywhere I could find useLocalHead in the documentation https://i18n.nuxtjs.org/docs/composables/use-locale-head#usage and here: https://i18n.nuxtjs.org/docs/guide/seo#feature-details

[userquin]

Pr welcome 🙏

[userquin]

PR merged