Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

strategy: prefix doesn't work when locales are set in i18n.config.ts and fetched from API but not hard coded in nuxt.config.ts #3288

Open
serhii-chernenko opened this issue Dec 29, 2024 · 0 comments

Comments

@serhii-chernenko
Copy link

Environment

  • Operating System: Darwin
  • Node Version: v20.14.0
  • Nuxt Version: 3.15.0
  • CLI Version: 3.17.2
  • Nitro Version: 2.10.4
  • Package Manager: [email protected]
  • Builder: -
  • User Config: default
  • Runtime Modules: @nuxtjs/[email protected]
  • Build Modules: -

Reproduction

The repo is available here: https://github.com/serhii-chernenko/nuxt-i18n-issue

I also added files to the Stackblitz service: https://stackblitz.com/edit/nuxt-starter-e83jtjvk?file=nuxt.config.ts, but it just doesn't work with dynamic routes. It'd be better to reproduce locally from the GitHub repo mentioned above.

Describe the bug

Nuxt i18n dynamic locales issue explanation

The main goal I want to achieve is fetching locales' setup from a DB.

I have the languages API endpoint languages.get.ts:

export default defineEventHandler(() => {
  return {
    fallbackLocale: 'en',
    locales: [
        { code: 'en', name: 'English' },
        { code: 'ua', name: 'Ukrainian' }
    ],
    messages: {
        en: {
          home: 'Home',
          about: 'About Us'
        },
        ua: {
          home: 'Головна',
          about: 'Про нас'
        }
    },
  };
});

The data is fetched in i18n.config.ts:

export default defineI18nConfig(async () => {
    return await $fetch('/api/languages');
})

The file is imported via nuxt.config.ts:

export default defineNuxtConfig({
  i18n: {
    strategy: 'prefix',
    defaultLocale: 'en',
    vueI18n: './i18n.config.ts',
    // locales: ['en', 'ua'],
  }
})

As a result, translations work as expected, but strategy: prefix is not. en and ua locale codes are not included in the URL.
image
image

The only way I found to fix it, just add:

locales: ['en', 'ua'],

to the nuxt.config.ts:
image
image

But it doesn't make sense because it's still hardcoded anyway. I want to make strategy: prefix working when the whole functionality is dynamic and fetched from the API endpoint (from DB in general).

Additional context

No response

Logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant