How to address: Not found parent scope. use the global scope.

[Bobakanoosh]

I'm trying to use vue-i18n@9's Component Interpolation, following the docs https://vue-i18n.intlify.dev/guide/advanced/component.html:

// main.js
const i18n = createI18n({
    legacy: false,
    locale: "en",
    messages: {
        en: {
            tos: "Term of Service",
            term: "I accept xxx {0}.",
        },
    },
});

createApp(App).use(i18n).mount("#app");

// usage
<i18n-t keypath="term" tag="label" for="tos">
    <a href="/" target="_blank">{{ t("tos") }}</a>
</i18n-t>

and everything works fine, but I get a warning:

Not found parent scope. use the global scope.

I've searched issues on the repo and haven't really found any useful information about this warning

[kazupon]

In your case, you are running useI18n on a component that uses the Translation component, and it looks like there is no i18n setup.

The useI18n is a Compostion API for vue-i18n.
When you run it, it will setup your component to use i18n features. Specifically, useI18n returns a composer installation, associates an instance of it with a component, and acts as a local scope.
If you run useI18n with useScope: 'global', it will return a composer instance that can be used with any component created by createI18n.

The Translation Component (<i18n-t>) works internally by executing useI18n. If the component in which the Translation Component is used already has useI18n running, then it will use the composer associated with the component. This means that the Translation Component will work as a local scope by default.

[kazupon]

This doc will help you understand global scope and local scope.
https://vue-i18n.intlify.dev/guide/essentials/scope.html

[dsine-de]

So what is the recommended way to tell the internal <i18n-t> component to use the global scope and to get rid of the warning?
I understand there is a local vs. global scope, but is it recommended to just live with the warning?

Writing useI18n({useScope: 'global'}); in the <script setup> of my component has no effect. Should we import the <i18n-t> manually somehow and set the global option?

Thank you!

[kazupon]

You can resolve warning message the by specifying global to scope property on i18n-t component
I've added docs about it
https://vue-i18n.intlify.dev/guide/advanced/component.html#scope-resolving

[tillsanders]

Would it be possible to add the scope property to the i18n-n and i18n-d components as well?