Using i18



  • Hi there, I’m trying to use i18 with quazar v0.15.2 and I cannot figure how to do.

    I have in src/i18n/fr/index.js the following data :

    export default {
      app: {
        menuHeader: 'Menu principal',
        menuAbout: 'À propos',
        menuAboutSublabel: "Conditions générales d'utilisation",
        menuConfiguration: 'Configuration',
        menuConfigurationSublabel: 'Modifier votre configuration',
        footer: {
          title: 'Fait à Bordeaux avec'
        }
      }
    }
    

    in src/i18n/index.js I have

    import fr from './fr'
    
    export default {
      fr
    }
    

    and I think I did the good configuration quasar.conf.js :

    module.exports = function (ctx) {
      return {
        plugins: [
          'i18n',
          'axios'
        ],
        i18n: 'fr',
    

    I’m trying to use the values in my src/layouts/default.vue

    <q-toolbar-title>
      {{$q.i18n.title}}
      <div slot="subtitle">{{$q.i18n.subtitle}}</div>
    </q-toolbar-title>
    

    And the script

    export default {
      name: 'LayoutDefault',
      data () {
        return {
          leftDrawerOpen: false,
          lang: this.$q.i18n.lang
        }
      },
      created () {
        console.log(this.$q.i18n)
      },
      watch: {
        lang (lang) {
          import(`../i18n/${lang}`).then(lang => {
            this.$q.i18n.set(lang.default)
          })
        }
      },
      methods: {
      }
    }
    

    After all of this, the text is empty when rendering, the console contains a lot of French data like date, editor etc. but none of mine. Can someone help me ?



  • Hey, Quasar i18n is only intended to handle translation of Quasar components.
    For app sapce translation you want to take a look at https://github.com/kazupon/vue-i18n

    If during project initialisation you choose to use i18n you should be ready to go and have a file i18n.js in your plugin folder whith the following conent:

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

    here set locale to fr

    Now in your components you can use it like this {{ $t('title') }} in templates and like this.$t('title') in js.
    Check the docs of vue-18n for all the posibilities.



  • @a47ae Sorry to be late. I could make it run properly. Your answer is the good one. Thanks.