BVConfigPlugin and i18n

[chWagnr]

Describe the bug

I define the default settings like it is described in example 3 from the documentation (https://bootstrap-vue.org/docs/reference/settings#setting-config-via-individual-component-group-plugin-imports). For localization I use vue-i18n, also in the default settings. Changing the language by an user does not show any effect in the bootstrap components.

Steps to reproduce the bug

Vue.use(VueI18n);

const i18n = new VueI18n({
    messages: {
        de: {
            no_items_found: 'Keine Eintrage gefunden'
        },
        en: {
            no_items_found: 'No items found'
        }
    },
    locale: 'de',
    fallbackLocale: 'en'
});

Vue.use(BVConfigPlugin, {
    BTable: {
        emptyText: i18n.t('no_items_found')
    }
});

when calling i18n.locale = 'en' the emptyText will remain in German

Expected behavior

Components should show the correct translations.

Versions

Libraries:

• BootstrapVue: 2.23.1
• Bootstrap: 4.6.2
• Vue: 2.7.14

Am I doing something wrong? Changing the language is working for the rest of the frontend, but for the defaults. Or is there a better way to set the defaults?

[Hiws]

I'd say this behavior is expected.

What you could try to fix it is to make it computed.

import { computed } from "vue"
Vue.use(VueI18n);

const i18n = new VueI18n({
    messages: {
        de: {
            no_items_found: 'Keine Eintrage gefunden'
        },
        en: {
            no_items_found: 'No items found'
        }
    },
    locale: 'de',
    fallbackLocale: 'en'
});

Vue.use(BVConfigPlugin, {
    BTable: {
        emptyText: computed(() => i18n.t('no_items_found'))
    }
});

If that doesn't work, then you'll likely have to make a wrapper component instead which has your basic configs.

[chWagnr]

Hi, thanks for your help. computed didn't work, but just a simple function like this: emptyText: () => i18n.t('no_items_found')