Using i18

Al1_andre

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 ?

a47ae

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.

Al1_andre

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

No More Posting New Topics!

Using i18