Upon rendering a page, onBeforeRoute() is the first hook that Vike calls, which means that the rest of your app doesn't have to deal with localized URLs anymore and you can simply use pageContext.locale instead.
See API > usePageContext() for being able to access pageContext.locale in any React/Vue component.
This technique also works with:
?lang=fr query parameters
domain.fr domain TLDs
Accept-Language: fr-FR headers
The Accept-Language header can be used for redirecting the user to the right localized URL (e.g. URL /about + Header Accept-Language: de-DE => redirect to /de-DE/about). Once the user is redirected to a localized URL, you can use the technique described above. You can perform the redirection by using your server (e.g. Express.js) independently of Vike.
Using the Accept-Language header to show different languages for the same URL is considered bad practice for both SEO and UX reasons. It's recommended to use Accept-Language only to redirect the user.
If you use pre-rendering then, in addition to defining onBeforeRoute(), you also need to
define the onPrerenderStart() hook:
See /examples/i18n/ for an example using onPrerenderStart().
Your onBeforePrerenderStart() hooks (if you use any) return URLs without any locale (e.g. onBeforePrerenderStart() returning /product/42). Instead, it's your onPrerenderStart() hook that duplicates and modifies URLs for each locale (e.g. duplicating /product/42 into /en-US/product/42, /de-DE/product/42, /fr-FR/product/42).
Essentially, you use onBeforePrerenderStart() to determine URLs and/or load data, and use onPrerenderStart() to
manipulate localized URLs and set pageContext.locale.
onPrerenderStart() is a global hook you can define only once, while onBeforePrerenderStart() is a per-page hook you can define multiple times.
Alternatively, if you need to load data that depends on localization, instead of onPrerenderStart() you can use
onBeforePrerenderStart() to localize pageContext.data:
You may still need to use onPrerenderStart() for localizing static pages that don't load data:
lang
You can use the lang setting to define the value of the <html lang> attribute, see lang.