change quasar language at runtime works for en-US & de but not for others, e.g. nl or es



  • Hi,

    I have followed the manual on the Quasar language packs including the ‘Change quasar language at runtime’ and I have been able for a Qtable to dynamically change the language between en-US & de.

    I have read the manual many times and run different test (browser restart, from scratch, … etc) with language nl or es, but it doesn’t work.

    My understanding is by adding the additional language, it would load the additional language dynamically:

    import languages from 'quasar/lang/index.json';
    const appLanguages = languages.filter(lang =>
      ['nl', 'es', 'de', 'en-us'].includes(lang.isoName)
    );
    

    At least the qselect from the example will show the additional added language, but when I pick either nl or es., in this case for qtable, the pagination “Records per page” remains, but while I pick de, it shows “Zeilen pro Seite”, which is as expected.

    Looking at the console of the browser when e.g. picking nl, it shows:

    Cannot find module './nl.js'
    

    drilling into the debugger, I see:

    var map = {
    	"./de": [
    		"./node_modules/quasar/lang/de.js",
    		"vendor"
    	],
    	"./de.js": [
    		"./node_modules/quasar/lang/de.js",
    		"vendor"
    	],
    	"./en-us": [
    		"./node_modules/quasar/lang/en-us.js"
    	],
    	"./en-us.js": [
    		"./node_modules/quasar/lang/en-us.js"
    	]
    };
    function webpackAsyncContext(req) {
    	if(!__webpack_require__.o(map, req)) {
    		return Promise.resolve().then(function() {
    			var e = new Error("Cannot find module '" + req + "'");
    			e.code = 'MODULE_NOT_FOUND';
    			throw e;
    		});
    	}
    

    checked in my project
    that “./node_modules/quasar/lang/nl.js” definitely exists, I guess it is somehow not in the map?

    It sounds to me a simple thing which I am doing wrong, but I have the read the manual so many times now, anyone have any idea what to do to fix this?

    Thanks in advance!



  • See if this helps you.

    https://medium.com/quasar-framework/adding-full-i18n-to-quasar-150da2d5bba4

    Have a look at the Pro Tip #1. 😋

    Scott



  • Hi Scott,

    I indeed had read that (your) page but I thought to follow the official Quasar manual 😆.

    • Your example and in the codepen is working, even adding languages like nl and it to the langs object, so dynamically loading is working.

    • the quasar manual is not working.

    Analysis:
    Quasar manual watch / import function is for some reason not working:

      watch: {
        lang (lang) {
          // dynamic import, so loading on demand only
          import(
            /* webpackInclude: /(de|en-us)\.js$/ */
            'quasar/lang/' + lang
            ).then(lang => {
            this.$q.lang.set(lang.default)
          })
        }
      },
    

    Your example codepen is watch / import is working and to make this work for the quasar manual (also now working in my project:
    1 - Use the watch / lang / import function from your page:

    watch {
         lang(lang) {
          this.$i18n.locale = lang.value
          // set quasar's language too!!
          import(`quasar/lang/${lang.value}`).then(language => {
            this.$q.lang.set(language.default)
          })
    },
    

    2 - In the Quasar manual for q-select, one also needs to remove the ‘emit-value’, to make sure an object with member value is passed.

    (I tested without changing the emit-value and using the better import but the compiler gave an error when using:

    import(`quasar/lang/${lang}`)
    

    )

    The quasar manual should be changed to your page 😉 (or the above fixes).

    Thanks, very much appreciated,

    Max



  • If you know what needs changing, your the best person to do it. 😄 There is a nice pencil icon top right in the docs. 😉

    Scott



  • I think this it, let me know if I did something wrong, my last pull requests was like 7 years ago (now back into development 😁 )
    https://github.com/quasarframework/quasar/pull/6735


  • Admin

    The docs example is correct, and please note the /* webpackInclude: /(de|en-us)\.js$/ */ part. If you want more languages add them there. You can even remove the special webpack comment if you want all languages.



  • watch: {
    lang (lang) {
    this.$i18n.locale = lang
    // set quasar’s language too!!
    import(quasar/lang/${lang}).then(language => {
    LocalStorage.set(‘language’, language.default.isoName)
    this.$q.lang.set(language.default)
    })
    }
    },

    Here is the correct way with the 1.12.3 version


Log in to reply