Multiple language in vue.js app

Question

I am using the following script so as to have french and english in my application:

import Vue from 'vue';
import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage';

Vue.use(MLInstaller);

export default new MLCreate({
  initial: 'english',
  save: process.env.NODE_ENV === 'production',
  languages: [
    new MLanguage('english').create({
      logo:'logo-english',
      emotion: happy,

    }),

    new MLanguage('french').create({
      logo:'logo-french',
      emotion: joyeux,

    })
  ]
})

For text I can simply do the following:

But for images I do not know how to retrieve the value of logo to pass it to my method below:

Method (dynamically pull the logo image and extension):

getImg(image, ext) {
  return require(`@/assets/images/${image:this.logo}.${ext}`);
},

Get the image:

I want to merge both and right now I can only get the alt value but cannot parse the logo one as I do not know how:

<img v-bind:src="getImg(logo, 'svg')" v-bind:alt="$ml.with('VueJS').get('logo')" />

How can I apply $ml to "getImg(logo, 'svg')"?

Answer 1

UPDATED CODE: Language Data and multi language function

//language.js

import Vue from 'vue';
import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage';

Vue.use(MLInstaller);

export default new MLCreate({
  initial: 'english',
  save: process.env.NODE_ENV === 'production',
  languages: [
    new MLanguage('english').create({
      logo:'logo-english',
      emotion: happy,

    }),

    new MLanguage('french').create({
      logo:'logo-french',
      emotion: joyeux,

    })
  ]
})

Code to make the image dynamic

//tools.js

export const mapLanguageKeys = function (keys) {
    let computed = {}

    for (let computedPropertyName in keys) {
        computed[computedPropertyName] = function mappedLanguageKey () {
            return this.$ml.with('VueJS').get(keys[computedPropertyName])
        }
    }

    return computed
}

Inside my component

//header.js

<script>
import { MLBuilder } from 'vue-multilanguage'
import {mapLanguageKeys} from '../tools'
..


  computed: {
    ...mapLanguageKeys({
        'computedLogoName': 'logo',
    }),
  },
  methods: {
    changeLang(lang) {
      this.$ml.change(lang);
      this.currentLang = lang;
    },
    getImg(image, ext) {
      return require(`@/assets/images/${image}.${ext}`);
    },
  },

My HTML call to the image and button switch

    //Language placeholders
    <h1 v-text="$ml.with('VueJS').get('emotion')" />
    <img v-bind:src="getImg(computedLogoName, 'svg')" v-bind:alt="computedLogoName" />

   //Button switch
    <div class="tools">
      <button
          v-for="lang in $ml.list"
              v-if="currentLang !== lang"
          :key="lang"
          @click="$ml.change(lang); currentLang = lang"
          v-text="lang"
      />

Everything in v-text switches upon clicking the button, however the image itself v-bind:src only loads once and does not change again. I have tried adding v-bind:src="lang" to the button above but it still only loads the english logo.

Answer 2

You can use computed properties for that matter :

computed: {
    computerLogoName () {
        return this.$ml.with('VueJS').get('logo')
    }
}

But as you stated it, you want it to be dynamic, I'd use a technique which is like mapGetters in vuex :

First, in a separate file you need to create a function which will return an object containing all your getters. Like this :

export const mapLanguageKeys = function (keys) {
    let computed = {}

    for (let computedPropertyName in keys) {
        computed[computedPropertyName] = function mappedLanguageKey () {
            return this.$ml.with('VueJS').get(keys[computedPropertyName])
        }
    }

    return computed
}

So basically, this function takes an object in parameter. The key will be the name of the computed property (i.e. "computedLogoName"), and the value will be the "language key" (i.e. "logo"). Then, the code inside the function mappedLanguageKey is just the code that you would put inside your computed property.

The last step is to add these generated computed properties in your computed object. This is done with ES6's "..." operator (don't forget to import your function) :

computed: {
    ...mapLanguageKeys({
        'computedLogoName': 'logo'
    })
}

And this should do the trick.

Using it is now the easiest thing on earth, you have a computed property called computedLogoName which returns the "language value" for the "language key" logo. So in the javascript code you can just call this.computedLogoName and in the html just computedLogoName.

How to put it in a separate file and import it :

Create a file called language.js (you can give it another name if you'd like). Then, paste the code of the function inside that file. When you want to call that function in the component, you just need to import it like that :

import {mapLanguageKeys} from './path/to/language.js';

And you can use it.

Note : I am assuming you are using ES6.

Note 2 : You could also use a method.