[SOLVED] Dynamic set of Quasar lang from store value



  • @ssuess you’re not looking enough, see lines 95 and 102 of src/boot/axios.js :). line 14 of src/router/index.js and see further how i’m tapping into the store to change the title of the current page.



  • Thanks! Sorry I missed that, it gives me an idea of something new to try…I will do that and get back to you…



  • Finally! Now I see what the problem was! I was neglecting to use {store} INSIDE the EXPORT of the boot logic, thinking it was provided by other components. Now it seems so obvious (and I feel pretty dumb). Thanks @metalsadman and @s-molinari for helping me troubleshoot this!

    FYI, the code change was from this:

    export default async () => {
      let langIso = 'en-gb'
      console.log(store.state.rstruth.lang_prefs)
      if (store.state.rstruth.lang_prefs !== 'en-gb') {
        langIso = store.state.rstruth.lang_prefs
      }
    

    to THIS:

    export default async ({ store }) => {
      let langIso = 'en-gb'
      console.log(store.state.rstruth.lang_prefs)
      if (store.state.rstruth.lang_prefs !== 'en-gb') {
        langIso = store.state.rstruth.lang_prefs
      }
    


  • Hehehe…sorry. But, this deserves a 🤦♂.

    😁

    Scott



  • @s-molinari Since we are still on the same subject, I am now trying to also set the language for i18n at the same time, but it does not seem there is a param to pass through in the same way is there? So I assume I need to do something like this?

    import i18n from 'boot/i18n.js'
    
    export default async ({ store }) => {
        i18n.locale = myStoredLocale
    }
    

    or do you recommend another way to set the i18n locale at boot?



  • Try it out. I’ve never dealt with presetting the language and in fact, this is a use case that we should know about. I’m going to be updating my article with what we find out here. So, try what you can. If it works or maybe @metalsadman has a better idea, then that is what we’ll go with for now.

    Scott



  • FYI, it totally works with the code shown above. Now we have a way to set lang (for both Quasar and i18n) across restarts/reloads. This assumes that the i18n boot file is configured to export it like so (from @s-molinari medium article):

    import VueI18n from 'vue-i18n'
    import messages from 'src/i18n'
    
    let i18n
    
    export default async ({ app, Vue }) => {
      Vue.use(VueI18n)
    
      // Set i18n instance on app
      app.i18n = new VueI18n({
        locale: 'en-gb',
        fallbackLocale: 'en-gb',
        // enableInSFC: true,
        messages
      })
      i18n = app.i18n
    }
    
    export { i18n }
    


  • Great that helped.

    Can you share your boot file, where it brings it all together please?

    Scott



  • sure, here is my boot file:

    // for when you don't specify quasar.conf.js > framework: 'all'
    import { Quasar } from 'quasar'
    import { i18n } from 'boot/i18n.js'
    
    export default async ({ store }) => {
      let previouslyRestored = false
      await store.restored
      if (!previouslyRestored) {
        previouslyRestored = true
      }
    
      let langIso = 'en-gb'
      if (previouslyRestored) {
        console.log(store.state.rstruth.lang_prefs)
        if (store.state.rstruth.lang_prefs !== 'en-gb') {
          langIso = store.state.rstruth.lang_prefs
        }
        i18n.locale = langIso
        try {
          await import(`quasar/lang/${langIso}`)
            .then(lang => {
              Quasar.lang.set(lang.default)
            })
        } catch (err) {
          // Requested Quasar Language Pack does not exist,
          // let's not break the app, so catching error
        }
      }
    }
    

    Some important things to note:

    • This relies on a vuex store and a way to persist my vuex values (I use vuex-persist but there are other ways)
    • I am using a call in vuex-persist (previouslyRestored) to check if my state has been restored before I try to access values from the store.


  • Thanks @ssuess. I’ll dissect what I need and update my article for pro tip #3. 😀

    Scott


Log in to reply