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": [
    	"./de.js": [
    	"./en-us": [
    	"./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.

    Have a look at the Pro Tip #1. 😋


  • 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.

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

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

    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 => {

    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:



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

    Thanks, very much appreciated,


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


  • 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 😁 )

  • 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)

    Here is the correct way with the 1.12.3 version

Log in to reply