Failed to resolve i18n-t component and t directive - Vue-i18n

Question

I have integrated the Vue I18n plugin into my project and for some reason it is not working 100% correctly.

globalInjection is set to true in my configuration as follows:

const i18n = createI18n({
    fallbackLocale: defaultLocale,
    legacy: false,
    globalInjection: true // <-- See here
});

The following does work in an SFC:

<h1>{{ $t('views.home.body.some_key') }}</h1>

However, if I try to use the <i18n-t> custom component, or the v-t custom directive, I get the following errors:

runtime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve component: i18n-t

runtime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve directive: t

I have read through the documentation numerous times now but still cannot find clear instructions as to how to inject the component and directive globally. I had assumed that globalInjection would have handled this, but for some reason, it hasn't.

Am I meant to be using usei18n() in my SFC? I have tried this, and it threw the same error...

Not sure if it is relevant, but I am using Webpack. I also read something about needing to put something into the webpack configuration but again, the documentation is extremely unclear...

Update

My app.js looks like this (key parts extracted):

import { i18n } from './utils/i18n/index.js';

app.use(i18n);

and the ./utils/i18n/index.js looks like this:

const setupI18n = () => {

    const defaultLocale = config.locales.default.toLowerCase();

    const i18n = createI18n({
        fallbackLocale: defaultLocale,
        legacy: false,
        globalInjection: true
    });

    loadLocaleTranslations(i18n, defaultLocale);

    setLocale(i18n, getLocale());

    registerI18nMiddleware(i18n, router);

    window.onlanguagechange = () => {
        setLocale(i18n, getLocaleFromBrowser() ?? getLocale());
    };

    return i18n;
};

const i18n = setupI18n();

export default i18n;

Answer 1

This issue was caused by the __VUE_I18N_FULL_INSTALL__ setting:

new webpack.DefinePlugin({
    __VUE_I18N_LEGACY_API__: false,
    __VUE_I18N_FULL_INSTALL__: false // <- This needs to be TRUE
})