Open martinszeltins opened 3 months ago
definePageMeta({
name: 'login'
})
on the login page
So you can use 'name' as localeRoute({ name: 'login' }, locale.value)
for example.
@martijndewit That didn't work. I still see index__en
and user__de
in route names.
How did you set your Routing Strategy ?
Sorry, that still doesn't work. useRoute()
expects a union type to be passed in. I don't think the routing strategy has anything to do with it.
Error:
Argument of type '(RouteLocation & { href: string; }) | undefined' is not assignable to parameter of type 'keyof RouteNamedMap | undefined'.
Would you be able to provide a reproduction? 🙏
Same issue, why route names are localized by default? It makes code extremely unreadable and quite doesn't make sense. Every time I need to resolve a route path, I need to figure out the current locale and then suffix it with that locale. I think you should be able to just reference the route name without a locale, and it resolves into a path with the current locale.
How do you reproduce this with stackblitz? As far as I've tried there are no type hints on stackblitz with nuxt(vue). Not only that, I can't even get i18n to redirect to /en on stackblitz
https://stackblitz.com/edit/github-zep9gz-2odmdq?file=pages%2Ftest.vue
This is related to route strategy
, you will not have this behavior when using no_prefix
. Basically when using any other strategy the i18n module will generate localized routes and 'remove' original (unprefixed) routes when they should not exist.
We try to make this behavior easier to deal with by providing composables such as useLocalePath
, useLocaleRoute
etc. Unfortunately we have little control over the route type generation, it simply generates types based on the resulting routes, which are accurate for the usual useRoute
composable but not useful for the composables we provide.
@BobbieGoede
So how do you get type support with useLocaleRoute if for example you have a page in /pages/foo/[slug].vue
?
...
Only this works, but nowhere did I get any hints that slug is even a possible key of params...
There are also no type hints that /:slug(.*)*
is a possible route, even though I have [...slug].vue
in my pages
dir.
I'm guessing that this example is not even possible if you have strategy: 'prefix'
set, because there's no way 'blog'
would be a possible type hint https://i18n.nuxtjs.org/docs/api#uselocaleroute
<script setup>
const localeRoute = useLocaleRoute()
const { locale } = useI18n()
const linkPath = computed(() => {
const route = localeRoute('blog', locale.value)
return route != null ? route.path : '/'
})
</script>
I spent some time in the past week to see what it would take to have most of the type inference for these route composables/functions.
Here's what I have so far https://github.com/BobbieGoede/i18n/pull/49, this branch contains lots of duplicated code from both Vue Router and Nuxt, and relies on their internals so it's not anywhere close to being stable..
I will check with their maintainers at some point and see if I could make something happen for v9 but I'm not very optimistic that this is something they want to support/expose downstream.
The only way that I've found to be able to get IDE autocomplete for route params is to use one of the locale like this
const route = useRoute('login___en')
route.params.id // autocomplete works now
I am using this as a workaround, but it would be great not to have to.
const localeRoute = useLocaleRoute()
localeRoute({ name: 'users.edit' as 'users.edit___en', params: { id: row.id } })
Environment
N/A
Reproduction
N/A
Describe the bug
Nuxt i18n module has support for Nuxt typedPages but I can't understand how to use it.
Nuxt docs says:
But I don't have one
route-name
when using i18n. I don't have alogin
route. Instead I havelogin__en
,login__de
,login__fr
etc.Passing in simply "login" does not work
useRoute('login')
, it expects a locale which is very strange. How do I use this? I couldn't find anything in the docs.Additional context
No response
Logs
No response