javascriptvue.jsinternationalizationserver-side-renderingquasar-framework

How to set Quasar Language with SSR Mode from route param?


How to use Quasar Language Packs with this kind of route and SSR mode?

const routes = [
  {
    path: '/:locale?',
    beforeEnter: localeNavGuard,
    children: [ ... ]
  }
]

Solution

  • Make a boot file for Quasar lang pack:

    import { Lang } from 'quasar'
    
    // relative path to your node_modules/quasar/..
    // change to YOUR path
    const langList = import.meta.glob('../../node_modules/quasar/lang/*.js')
    // or just a select few (example below with only DE and FR):
    // import.meta.glob('../../node_modules/quasar/lang/(de|fr).js')
    
    // ! NOTICE ssrContext param:
    export default async ({ ssrContext, router }) => {
      router.beforeEach((to, _from, next) =>
      const langIso = to.params.locale
      try {
        const lang = await langList[ `../../node_modules/quasar/lang/${ langIso }.js` ]()
        Lang.set(lang.default, ssrContext)
      }
      catch (err) {
        console.error(err)
        // Requested Quasar Language Pack does not exist,
        // let's not break the app, so catching error
      }
    
        return next()
      })
    }
    

    Routes:

    import { locales } from 'src/i18n/config'
    
    const routes = [
      {
        path: `/:locale(${locales.join('|')})?`,
        children: [ ... ]
      }
    ]