How do I translate Quasar component?



  • I have a Vue/Quasar application in which I use i18n but now I’m facing a problem: table footer doesn’t get translated. In the table headers, for example, I do something like this to translate column names:

    {
      align: 'left',
      field: (val) => val,
      label: this.$t('locale.column'),
      name: 'column',
      required: true,
      sortable: true,
    },
    

    where $t is 18n function, locale is my component and the column is actually’s column’s name. I don’t have direct access to the footer of the table (where the pagination an the total number of the elements are) and it doesn’t get translated. I also use Quasar language packs, quasar.js goes like this:

    import en from 'quasar/lang/en-us.js'
    /*
      import other languages
    */
    import {
      state,
    } from '@state/modules/i18n';
    
    const locale = state.locale;
    const langDictionary = {
      // all the imported langs go here
    };
    
    Vue.use(Quasar, {
      config: {},
      components: { /* not needed if importStrategy is not 'manual' */ },
      directives: { /* not needed if importStrategy is not 'manual' */ },
      plugins: {
        Cookies,
        Dialog,
        Loading,
        Notify,
      },
      lang: langDictionary[locale]
    });
    
    export {langDictionary}; 
    

    How do I translate the table footer?
    a984e1cb-be73-43a1-af48-d4a6215c4e5f-image.png




Log in to reply