victorgarciaesgi / nuxt-typed-router

🚦Provide autocompletion and typecheck to Nuxt router
https://nuxt-typed-router.vercel.app
MIT License
346 stars 12 forks source link

`localePath` broken when using the default locale #149

Open Alolu opened 2 weeks ago

Alolu commented 2 weeks ago

Describe the bug

Hello, the localePath method from i18n and all its derivative (NuxtLinkLocale for instance) always returns an empty string when the current locale is the default one.

The method works again when nuxt-typed-router is removed from the modules. I am using prefix_and_default as my i18n strategy and the latest version of nuxt-typed-router.

After some digging, it seems that nuxt-typed-router removes the ___[locale]___default suffix from the default route name, but i18n still localizes the route by suffixing with ___[locale]___default when using the default locale, causing the resolver to throw an error as there are no match found.

Thank you for your work on this module, it is really helpful!

Expected behavior

the localePath method and its derivative should return the correct path if am using the prefix_and_defaut strategy even if I am using the default locale.

Screenshots

Logs from the execution of localePath and resolveRoute in i18n using the default locale fr and the route /log-in, the route is localized to log-in___fr___default, which is not found by the router. image

List of registered routes in nuxt dev tools, the /log-in route lacks the ___fr___default suffix. image

The same list without nuxt-typed-router registered, the /log-in route has the correct name image

Environnement infos

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.9.0
- Nuxt Version:     3.12.0
- CLI Version:      3.11.1
- Nitro Version:    2.9.6
- Package Manager:  bun@1.1.12
- Builder:          -
- User Config:      devtools, typescript, app, modules, css, $development, primevue, eslint, i18n
- Runtime Modules:  @nuxtjs/tailwindcss@6.12.0, @nuxt/eslint@0.3.13, @vueuse/nuxt@10.10.0, nuxt-primevue@3.0.0, @nuxtjs/i18n@8.3.1, @pinia/nuxt@0.5.1
- Build Modules:    -
------------------------------

Your pages folder structure

pages
β”œβ”€β”€ grpd.vue
β”œβ”€β”€ index.vue
β”œβ”€β”€ log-in
β”‚   └── index.vue
β”œβ”€β”€ register
β”‚   └── index.vue
└── sales
    └── [uuid].vue

Your nuxt.config.ts

nuxt.config.ts

modules: [
'@nuxtjs/tailwindcss',
'@nuxt/eslint',
'@vueuse/nuxt',
'nuxt-primevue',
'@nuxtjs/i18n',
'@pinia/nuxt',
],
i18n: {
vueI18n: './i18n.config.ts', // if you are using custom path, default
locales: [
{
code: 'en',
file: 'en-US.ts',
},
{
code: 'fr',
file: 'fr-FR.ts',
},
],
defaultLocale: 'fr',
strategy: 'prefix_and_default',
lazy: true,
langDir: 'lang',
},

i18n.config.ts

export default defineI18nConfig(() => ({
legacy: false,
locale: 'fr',
}));
victorgarciaesgi commented 1 week ago

Hey! I know I have some problems with stratagies as it kept changing with nuxtjs-i18n betas. I planned on refactoring everything but I don't have much time :( You can already check the 4.0 branch but don't think it works yet

Alolu commented 1 week ago

Hi again, thanks for your reply, I managed to make it work in my environment while retaining the desired functionality, but the way I made it work leaves me to believe there might be something wrong with my solution.

I simply removed this whole block, effectively removing modifiers for the prefix_and_default strategy. https://github.com/victorgarciaesgi/nuxt-typed-router/blob/673762d2c50266705faaf4fadff523b7d486285f/src/core/parser/i18n.modifiers.ts#L28-L42

The typing still works, while the routes are now correctly named, allowing navigation even in default. Can you tell me if my solution breaks a functionality or retro compatibility ?