I18n plugin loading after site config i18n

[jakubkoje]

Describe the bug

I am trying to use the most of the translation features that this module offers. But I am having issues. The nuxtSiteConfig.ts does not get read, and that means the site title is a name from the package.json.

I investigated this a bit, and found out that inside the i18n plugin, you have this line:

const i18n = nuxtApp.$i18n;, which in my case always gets undefined.

Reproduction

No response

System / Nuxt Info

- Operating System: `Darwin`
- Node Version:     `v20.10.0`
- Nuxt Version:     `3.9.0`
- CLI Version:      `3.10.0`
- Nitro Version:    `2.8.1`
- Package Manager:  `bun@1.0.20`
- Builder:          `-`
- User Config:      `modules`, `extends`, `css`, `primevue`, `runtimeConfig`, `site`, `schemaOrg`, `googleFonts`, `tailwindcss`, `app`, `i18n`, `image`, `devtools`
- Runtime Modules:  `@nuxtjs/google-fonts@3.1.3`, `@nuxtjs/tailwindcss@6.10.1`, `@nuxt/image@1.1.0`, `@vueuse/nuxt@10.7.0`, `nuxt-icon@0.6.7`, `@nuxtjs/i18n@8.0.0`, `@vee-validate/nuxt@4.12.3`, `@nuxtseo/module@2.0.0-beta.51`, `@nuxt/devtools@1.0.6`, `nuxt-primevue@0.2.2`, `@pinia/nuxt@0.5.1`
- Build Modules:    `-`

[harlan-zw]

Hey @jakubkoje, I did some investigation around this and wasn't able to replicate the undefined $i18n. :thinking:

It may be a documentation issue, if you have a single locale file can you try and configure it like so

// locales/en.ts
export default {
  welcome: 'Welcome',
  nuxtSiteConfig: {
    name: 'My Site',
    description: 'My site description',
  },
}

I did also just push up a fix for refs not being resolved when using useSiteConfig which may also have contributed to the issue.

[jakubkoje]

I will try to provide reproduction later today and see if it is still issue.

[jakubkoje]

https://github.com/jakubkoje/nuxt-seo-reproduction

Here is the reproduction, not sure what I am doing wrong, but here it shows just a %siteName.

[harlan-zw]

Thanks! So I think this is a documentation issue on my end, makes it hard there's so many ways to configure the locales :laughing:

For your setup, you would do something like this:

de.json

{
  "hello": "Hallo Welt!",
  "nuxtSiteConfig": {
    "name": "Deutsch",
    "description": "Deutsch Beschreibung"
  }
}

en.json

{
  "hello": "Hello World!",
  "nuxtSiteConfig": {
    "name": "English",
    "description": "English Description"
  }
}

And deleting the .ts files.

[jakubkoje]

Great, thank you! It is working now. One last thing, is there somewhere mentioned that @nuxtseo/module must be declared before @nuxtjs/i18n in modules? I had to swap their positions to get it working.

[harlan-zw]

Great, thank you! It is working now. One last thing, is there somewhere mentioned that @nuxtseo/module must be declared before @nuxtjs/i18n in modules? I had to swap their positions to get it working.

Ah maybe this is what was causing the undefined i18n, there should be a way to fix this with Nuxt 3.9 so will look into it.

[harlan-zw]

Alright with the new dependsOn feature in Nuxt 3.9, the ordering issue is solved in v2.2.0. Have also updated the docs for usage so it's clearer.