NuxtJS - i18n - Initialize plugin (vue-fb-customer-chat) with the current locale

Question

I have successfully installed the vue-fb-customer-chat plugin in my NuxtJS website and the chat is working fine.

It is a multilangual website and I need to be able to load the chat in the right language (current locale from the nuxt-i18n module). It is okay if the chat does not change its language after switching the language from within the website, but I'd like to at least have the correct language when the page loads.

Here's the content of plugins/vue-fb-customer-chat.js file:

import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'

Vue.use(VueFbCustomerChat, {
    page_id: null, //  change 'null' to your Facebook Page ID,
    theme_color: '#845e5c', // theme color in HEX
    locale: 'fr_FR', // default 'en_US'
})

None of the following works:

context.app.i18n.locale
this.$i18n.locale
$i18n.locale

What would the approach be to solve this issue?

Thank your for your help in advance.

Answer 1

My colleague anwsered my question.

import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'

export default function (context) {
    const locale = context.app.i18n.locale;
    const iso = context.app.i18n.locales.find(l => l.code === locale).iso;

    Vue.use(VueFbCustomerChat, {
        page_id: null, //  change 'null' to your Facebook Page ID,
        theme_color: '#845e5c', // theme color in HEX
        locale: iso.replace('-', '_'), // default 'en_US'
    })
}