i18n call usehead function outside the setup function

[mehdirayan]

hi
I'm using nuxt4+ionic with i18n. the plugin i18n won't initialize. the i18n call the function usehead() from the head.js of ionic, before the initialisation of the app.
here is a reproduction:
https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-yvftqmhs?file=nuxt.config.ts

[chrisspiegl]

I just ran into this as well.

Referencing the issue opened by @mehdirayan on the @nuxtjs/i18n repository: nuxt-modules/i18n#3800

The @BobbieGoede stated the following regarding the issue and potential fix:

@nuxtjs/ionic replaces/wraps the useHead composable with its own implementation which breaks its usage in our module.

The implementation should be fixed on their end to allow normal use of useHead by other modules/projects, could you open an issue on https://github.com/nuxt-modules/ionic 🙏?

Closing this since there's not much that can/should be done on our end.

Originally posted by @BobbieGoede in #3800

Is it possible to fix @nuxtjs/ionic to adopt this change to allow for regular useHead usage by other modules?

[FabianClemenz]

i need this fix also - can't update to i18n 10.1.0 @danielroe

[mehdirayan]

A temporary solution is to install vue-i18n as plugin.
i installed vue-i18n@11.1.12 and it works

[FabianClemenz]

@mehdirayan did you install vue-i18n and configure it as a replacement for nuxt-i18n or did you install vue-i18n besides nuxt-i18n?

[mehdirayan]

@mehdirayan did you install vue-i18n and configure it as a replacement for nuxt-i18n or did you install vue-i18n besides nuxt-i18n?

i've installed vue-i18n@latest as a plugin in nuxt@4.1.1. It works well.
look at this: https://github.com/mehdirayan/taqvaylit/tree/main

[FabianClemenz]

Ok so you used vue-i18n directly instead of using nuxt-i18n ?

[BobbieGoede]

After further investigating, it looks like this issue is also present when no head tag functionality is used at all (with nuxt-i18n). I'm going to work on a fix for that, but the underlying issue remains that the useHead implementation here relies on a component instance which deviates from the original useHead composable.