I18n-module: Access `$nuxtI18nSeo` through @nuxtjs/composition-api

[bissolli]

Hey guys,

I am trying to access $nuxtI18nSeo from the setup method using useContext from nuxt composition API but I can't find a way to access it.

Any guesses?

UPDATE:
I managed to access it with the following code... will that to what it's supposed to do? Also is that the "correct" way to do that?

const { app: { i18n } } = useContext() 
const seo = i18n.vm.$nuxtI18nSeo()

[rchl]

If it works and returns correct information then I guess it's just fine.
What are you doing with that seo object though? How are you passing it to VueMeta?
I don't have much experience with composition API yet so not sure what would be the ideal way. Maybe that SEO object should be exposed as new API?

[bissolli]

@rchl it's actually not returning the correct information but just an empty object.

I found another way to do that which did the job! See below:

...
setup(_, { root }: SetupContext) {

  const i18nSeo = root.$nuxtI18nSeo()
  useMeta({
      title,
      htmlAttrs: {
        ...i18nSeo.htmlAttrs,
      }
     ...
  })

}
...

I am leaving the issue open just in case someone has a better solution - it doesn't seems nice to accessing root for that 😅

[rchl]

I would need to provide Vue3-compatible API as described at https://dev.to/alvarosaburido/how-to-migrate-your-library-from-vue2-to-vue3-1h81

Similarly to how VueMeta does it already.
BTW. How did you configure VueMeta? Where did you place the VueMeta initialization code?

[aaronhuisinga]

@bissolli I'm stuck with this same issue. For some reason, however, the solution you posted using root.$nuxtI18nSeo() doesn't work for us. We get a "Cannot read property 'req' of undefined" error from .nuxt/nuxt-i18n/plugin.routing.js on line 167.

Did you run into this same issue, or did it just work for you right away? We might just temporarily ditch the SEO tags for now as we move to composition API until we can get it all working.

[manniL]

I've tried monkeypatching the req assignment to access it via context.ssrContext.req. That worked fine in my tests when using the composition API and target: 'static':

I changed https://github.com/nuxt-community/i18n-module/blob/master/src/templates/plugin.routing.js#L166 to
req: process.server ? this.$ssrContext?.req ?? this.context?.ssrContext?.req : null,

[rchl]

this.context or just context? In any case, if it doesn't break options API then feel free to submit PR. :)