Multilingual SSR

  • Hey guys,

    I have switched from React to Vue because of the internationalization issues with the React - a way too complicated, cumbersome and error-prone. The Vue approach is much cleaner - so, I’ve managed to build up a dynamic switching, works like a charm, but what I need is a way to switch not only the language, but also to have an URL translated i.e. to redirect a user to a translated page. Here is an example, let’s say we have an /about page and if a user switches a language to, say, German, he should be redirected to /de/about.

    So, the questions here - how would I do it in Quasar? Any best-practice approaches?

    We do need the SSR functionality though - you know, if we are building a multilingual site in 5 languages and having 50 pages in English, it would be great for SEO etc etc to have 250 pages.

    I would appreciate your input, thanks.

  • Your question is not about the quasar, but more about the vue-router. For this kind of URI structure you have to set optional param in routes: :locale?.
    All the globals should be inside the App.vue, store it there as a data, you can access via this.$root, injection or better with some of the store.
    Also you have to think about auto-detection of the locale via headers (in most cases it’s the best approach).

Log in to reply