Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Localization #47

Open
LeoMartinDev opened this issue Oct 1, 2018 · 4 comments
Open

Localization #47

LeoMartinDev opened this issue Oct 1, 2018 · 4 comments
Labels
enhancement New feature or request pinned

Comments

@LeoMartinDev
Copy link

It would be great to add translation support (https://github.com/kazupon/vue-i18n ?)

@mattmezza
Copy link
Owner

Thanks, definitely a great idea. Will try to work this out asap.

If you feel like giving it a try feel free to PR, this project is looking for awesome collaborators :)

@mattmezza mattmezza added the enhancement New feature or request label Oct 1, 2018
@arabakevin
Copy link
Contributor

arabakevin commented May 30, 2020

Hi,
I try to integrate this library (vue-i18n) but i I have some integration problems
so,
in this file ./i18n/translations.js => we have the translations
in src/index.js

import Launcher from './Launcher.vue'
import VTooltip from 'v-tooltip'
import VueI18n from 'vue-i18n'
import messages from './i18n/translations.js'

const defaultComponentName = 'beautiful-chat'

const Plugin = {
  install (Vue, options = {}) {
    /**
     * Makes sure that plugin can be installed only once
     */
    if (this.installed) {
      return
    }

    Vue.use(VueI18n)
    const locale = navigator.language
    const i18n = new VueI18n({
      fallbackLocale: 'fr',
      locale: locale,
      messages
    })

    this.installed = true
    this.event = new Vue({i18n})
    this.dynamicContainer = null
    this.componentName = options.componentName || defaultComponentName
    /**
     * Plugin API
     */
    Vue.prototype.$chat = {
      _setDynamicContainer (dynamicContainer) {
        Plugin.dynamicContainer = dynamicContainer
      }
    }
    /**
     * Sets custom component name (if provided)
     */
    Vue.component(this.componentName, Launcher)
    Vue.use(VTooltip)
    Vue.use(VueI18n)
  }
}
export default Plugin

And i start to change in the file "src/Launcher.vue" "you" in the header of the chat

  computed: {
    chatWindowTitle() {
      if (this.title !== '') {
        return this.title
      }
      if (this.participants.length === 0) {
        return $t('participant.you_only')
      } else if (this.participants.length > 1) {
        return $t('participant.you_and_participants', { participant: 'this.participants[0].name' })
      } else {
        return 'You & ' + this.participants[0].name
      }
    }
  },

but i receive this error

Capture d’écran 2020-06-02 à 21 46 25

i have try few others methods as this.$i18n and others.
Can you help me please ?
Thanks a lot.

@cureau
Copy link

cureau commented Jul 4, 2020

@arabakevin try this.$t('participant.you_only') etc

@ritikpal1122
Copy link

mark the variable name correctly instead of that you can try this.$t('participant.you_only')

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request pinned
Projects
None yet
Development

No branches or pull requests

5 participants