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

mlie

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!

s.molinari

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

mlie

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

s.molinari

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

mlie

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

rstoenescu

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.

wahono

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

No More Posting New Topics!

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