Change routes, based on locale detected in base method (way to localize paths)

[jeanfrancoisgb]

Hi,

Not sure it's the right place but I'm taking a chance here since it may generate ideas for ways to implement this (in a smart way that I'm tring to) in the future.

I'm trying to give to ViteSSR different routes based on localization.

First idea was to try to set the routes (with router.addroute()) inside of the base method inside ViteSSR export, but it's too late to edit the routes, it absolutely has to happen before.

Then I tried editing the routes in the async(ctx) => {}, and it's working but for the SSR part only, because on hydration, the page disappears. I assume it's because SSR and Vue hydration don't have the same routes to work with.

I'm still learning Vue and I'm sorry if some things seems obvious. I'm using the boilerplate by the author of this package to help me getting started: https://github.com/frandiox/vitesse-ssr-template

Here is what I got to:

export default viteSSR(
   App,
   {
     // Use Router's base for i18n routes
     base: ({ url }) => {
       const locale = extractLocaleFromPath(url.pathname)
       return locale === DEFAULT_LOCALE ? '/' : `/${locale}/`
     },
     routes,
   },
   async(ctx) => {
     // install all modules under `modules/`
     Object.values(import.meta.globEager('./modules/*.ts')).map(i =>
       i.install?.(ctx),
     )
 
     const { app, url, router, isClient, initialState, initialRoute } = ctx
     setLocalizedRoutes(router)
...

setLocalizedRoutes() adds the localized routes to the router (and works, because router.getRoutes() gives me the good localized routes juste under).

I tried setting up before ViteSSR export, but router.currentRoute is always set at / and no way to check the language from URL then, and it makes sense it's not set yet.

Would there be a way to get routes based on language to work in that context? I don't mind losing the instant translation on language switching.

Any help would be welcome, thank you so so much.

[frandiox]

If I understood correctly, you want to localize the slug, right? As in /en/users and /es/usuarios? Few approaches here in no particular order:

Aliases

An idea would be using route aliases for the slug part, and the base for the locale as in the example template. You would need to wrap your router links into something more clever that detects the correct alias for the current locale, though.

Using route children

{ path: '/en', children: [{ path: 'users' }] },
{ path: '/es', children: [{ path: 'usuarios' }] },

Adding routes dynamically

As you mentioned, using router.addroute(). I'm not sure why that didn't work for you. I think the only difference is that vite-ssr is wrapping the routes to access the meta.state. You could try something like this:

import viteSSR from 'vite-ssr'
import { addPagePropsGetterToRoutes } from 'vite-ssr/vue/utils'

viteSSR(App, { routes }, ({ router, initialRoute }) => {
   // main hook
   const localizedRoutes = getYourLocalizedRoutes({ initialRoute }) // initialRoute should contain useful information
   addPagePropsGetterToRoutes(localizedRoutes)
   localizedRoutes.forEach(router.addRoute)
})

External libs

There's also vue-lang-router.
I don't think it's compatible with vite-ssr but it is probably easy to fix in that library. Looks like it now creates an instance of vue-router internally but it could be modified to get it optionally from the params instead, if the author likes the idea 🤔

--

Hope something here helps!

[jeanfrancoisgb]

That is a very generous answer, thank you so so much!

I will be testing things in the next few days and I'll come back with my thoughts.

[jeanfrancoisgb]

I tried adding the routes dynamically like presented in your solution, but I end up with the same result as my first tries: The SSR version loads well and the source for the localized (slug) route is full and working as expected. I can event see my page for a few milliseconds until Vue kicks in.

As Vue initiate in after page load, the page disappears and become empty:

<div id="app" data-server-rendered="true" data-v-app=""><!----></div>

I wonder if it is related to my Vue skills, because I do it that way (using your SSR boilerplate project) and not exactly as your example up there, I might be updating my routes at the bad place?

export default viteSSR(
  App,
  {
    // Use Router's base for i18n routes
    base: ({ url }) => {
      const locale = extractLocaleFromPath(url.pathname)
      return locale === DEFAULT_LOCALE ? '/' : `/${locale}/`
    },
    routes,
    
  },
  async(ctx) => {
    // install all modules under `modules/`
    Object.values(import.meta.globEager('./modules/*.ts')).map(i =>
      i.install?.(ctx),
    )

    const { app, url, router, isClient, initialState, initialRoute } = ctx
    const localizedRoutes = getLocalizedRoutes({ initialRoute }) // initialRoute should contain useful information
    console.log(localizedRoutes)
    addPagePropsGetterToRoutes(localizedRoutes)
    localizedRoutes.forEach(router.addRoute)

    console.log(router.getRoutes())

...

Thanks again for your answer, I really appreciate! 🙌

[frandiox]

@jeanfrancoisgb I'm not sure if GitHub is making fun of me or I'm just too sleepy, but I'm pretty sure I wrote a reply here a while ago explaining why this didn't work... bizarre 😅
Oh well, just came to say that I've released 0.10.4 and that it should now work 👍

[jeanfrancoisgb]

@frandiox Maybe a little of both! ;)

Thank you for the release, I really appreciate!