[Feature request] translations in mixins

Reading other issues, you seem to discourage ppl from using mixins, but they’re so useful.

I would like to share some behavior between a bunch of components (especially across different builds, where “global” translations would still have to be duplicated)

const ChickenMixin = {
  methods: {
    scream () {
      alert(this.$t('scream'))
    }
  },
  i18n: {
    messages: {
      en: {
      	scream: 'cock-a-doodle-do'
      },
      fr: {
      	scream: 'cocorico'
      }
    }
  }
}

it does not work at the moment : http://jsfiddle.net/2hs4pgwe/2/

[yfwz100]

I think adding a flag to enable mixin merging is a solution. Is there any plans for this feature? @kazupon

[pmrotule]

I had the same issue and found the solution using optionMergeStrategies a bit intrusive. I tried a few things and came up with this helper function which solved the problem:

export function mergeLocaleMessages(i18n, messages) {
  for (const locale in messages) i18n.mergeLocaleMessage(locale, messages[locale])
}

You can simply use it within a beforeCreate hook by providing the $i18n plugin of the current Vue instance (a.k.a. this.$i18n). As you don’t provide the i18n root instance, your translations will be scoped to the component which means you will still have component-based localization.

import { mergeLocaleMessages } from '@/helpers/i18n'
import i18nChicken from '@/locales/chicken.json'

const ChickenMixin = {
  beforeCreate() {
    mergeLocaleMessages(this.$i18n, i18nChicken)
  },
  methods: {
    scream() {
      alert(this.$t('scream'))
    },
  },
}

@/locales/chicken.json

{
  "en": {
    "scream": "cock-a-doodle-do"
  },
  "fr": {
    "scream": "cocorico"
  }
}

I personally like having my translations in separate files, but of course, you can define the object directly in your mixin. Hope it helps.