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 {

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

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

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

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

    And the script

    export default {
      name: 'LayoutDefault',
      data () {
        return {
          leftDrawerOpen: false,
          lang: this.$q.i18n.lang
      created () {
      watch: {
        lang (lang) {
          import(`../i18n/${lang}`).then(lang => {
      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

    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 }) => {
      // Set i18n instance on app
      app.i18n = new VueI18n({
        locale: 'en',
        fallbackLocale: 'en',

    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.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.