-
-
Notifications
You must be signed in to change notification settings - Fork 485
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
switchLocalePath()
returns empty string on error 404
#3166
Comments
Would you be able to provide a reproduction? 🙏 More infoWhy do I need to provide a reproduction?Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. What will happen?If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If How can I create a reproduction?We have a couple of templates for starting with a minimal reproduction: 👉 Reproduction starter (v8 and higher) A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as minimal as possible. See more details in our guide. You might also find these other articles interesting and/or helpful: |
So what's missing from the code I already posted? |
You have provided a code snippet but your issue could be caused by a variety of factors such as config and project structure. A minimal reproduction (stackblitz or repository) with steps on how to reproduce your issue would allow me to actually debug what's happening. |
https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-za36nq?file=components%2FLangSwitcher.vue I used your starter template. I copy & pasted the code from Both pages use the same |
Hmm I see what you mean, what do you expect |
The same as everywhere else. I use the same top bar for all pages, so I expect the language switcher to work everywhere the same. The error is just a different kind of content, but I don't see that page any different from the other pages. And I wonder why Nuxt does. |
The language switcher would keep working if you add a catch all route/page, though going to a non existent route would not trigger an error anymore🤔 The core issue is not it being an error page but the trying to resolve a translated version of a non existent route. Would that fit your use case? |
Ah, that makes sense. TBH I'm not a fan of all the crude magic going on inside Nuxt. In Vue I would just have defined a catchall route in the router. But as Nuxt is stubborn about being different, I think that the At least the Nuxt error page takes care of sending the right http status code to the client. I suppose that I would have to create all that my self with the catchall approach? And how would I create such a catchall route in Nuxt? Important context: I'm using Nuxt just for SSG. No Nitro, I'm just dumping the contents of |
The catch all route would only be used for non existent pages, check the docs on how to make one here https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route. The language switcher will keep working on any error page as long as the page actually exists for there to be localized variants of those, errors other than 404 should render the |
switchLocalePath()
returns empty string if used on error pageswitchLocalePath()
returns empty string on error 404
But a catchall is different from an error page. Catchall will send 200 for pages that should send 404. I'll look into that approach, should be possible to mimick a real error page using |
I agree they're different, but it would resolve the issue of the language switcher not working. It seems like the underlying behavior is clear for this issue, language switching does not work on non existent pages combined with Nuxt considering the error page not to be a 'page', does that sound right? For issues/questions about Nuxt specific behaviors you'll have better luck opening an issue on the Nuxt repository or asking in the Discord. |
The package ist called |
So what do you expect |
I want to be able to switch languages, even on the error page. If the user is on the non-existing route EDIT: and maybe |
If a route exists in one language then it does work the way you describe, which ironically is actually an issue for other users, see #2782. You can switch language fine on the error page (using
If you're on a non existent page, like |
I see the confusion here. But however you want to solve this, it should be consistent from the users' point of view.
But how would this work with prefixed routes? Imagine the user to be on the non-existing route From the users' POV, the url of an existing and non-existing route should follow the same rules. Everything else is just confusing. The only difference between existing and non-existing routes is on the technical side. I think the high-level question that causes the confusion is: do we expect that a page exists in every locale? I would think so. If there's no translation, the page will show it's content in the fallback-locale. So we can also assume that every page that does not exist in one locale doesn't exist in all others. So a 404 in English will also be a 404 in German. |
If you want localized routing to work, you need to be on an actual route. I suggest adding a 404 page and redirecting to it instead of showing the error 'page', or alternatively remove the language switcher on the error page and provide a link to a proper route. There's a reason Getting the localized version of the current page is not straightforward, which is why internally we rely on route names as these don't get localized. This guarantees an actual page is returned or nothing is returned but also requires the current page to exists, the same applies for Vue Router except it throws an error instead of an empty string. If we matched the behavior of Vue Router's route resolution we would only resolve non-existent routes when given a path (you can do this with router.resolve('/non-existent') // => { path: '/non-existent', ... }
router.resolve({ path: '/non-existent' }) // => { path: '/non-existent', ... } If you're on a non-existent page/path, and try to resolve the current path with other query params or params: // on /non-existent
router.resolve({ query: { foo: '123' } }) // => throws error
router.resolve({ param: { foo: '123' } }) // => throws error Swapping out the locale as if it were a parameter would not be consistent with route resolution, the page would be broken entirely. The I'm willing to consider changing the route resolution if enough people agree with your suggested behaviors, but it would need to be made in a next major version. In the meantime you will have to implement your own fallback resolution or one of the suggestions I have made. |
Environment
Reproduction
Describe the bug
According to nuxt docs, the
error.vue
page to generate a custom error page has to be located outside of thepages
directory in thesrc
directory side by side withApp.vue
.If I use the
switchLocalePath()
function on this page, it will always return a empty string instead of the actual locale path.I'm using the same piece of code in
src/error.vue
and insrc/pages/index.vue
, so I can say for sure that it should work.Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: