search

nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.75k stars 483 forks source link

useLocaleHead() does not work on Index page #2749

Closed martinsjek closed 9 months ago

martinsjek commented 9 months ago

Environment

StackBlitz

Reproduction

https://stackblitz.com/edit/github-orzjqc-6knjap?file=app.vue,pages%2Findex.vue

Describe the bug

When I navigate to index page, i don't see hreflang or canonical attributes, but when I navigate to "/tests/1" I see all of them, as I should. I would like to see them on Index page as well.

Additional context

No response

Logs

No response

BobbieGoede commented 9 months ago

You're not passing the tags returned by useLocaleHead to useHead or SEO components, which is why the head tags are not added on the index page (see composable docs).

The difference in behavior between useSetI18nParams and useLocaleHead is confusing, useSetI18nParams internally sets the tags while useLocaleHead returns the tags for you to use. The reason why useSetI18nParams does this is to ensure the tags are updated during SSR/hydration since it is being rendered used later in the rendering process (in a page or component) while useLocaleHead is often if not always used earlier in layouts or app.vue.

We're planning on improving the docs and possibly add ways to configure SEO via configuration later.

martinsjek commented 9 months ago

@BobbieGoede In that case it renders canonical and other tags twice: Updated: https://stackblitz.com/edit/github-orzjqc-6knjap?file=app.vue,pages%2F[productCategory]%2F[id].vue

image

BobbieGoede commented 9 months ago

Ah, this issue can be fixed by passing identifierAttribute: 'id' to useLocaleHead, I should mention this in the docs as this is probably a common issue to run into.

From what I remember this is due to how useHead (which useSetI18nParams directly uses) looks up and replaces head tags during SSR/hydration. I suppose I could also change useSetI18nParams to accept an identifierAttribute parameter to make this consistent with useLocaleHead, but I seem to remember I ran into issues when updating head tags and not using 'id'.

Sorry for the inconvenience, this feature can get quite complicated due to the different ways it can be used, hopefully I have time to improve it soon.

martinsjek commented 9 months ago

Seems that adding identifierAttribute: 'id' to useLocalehead() fixes this issue. I'm currently closing it