Warning about parent / global scope when using i18n-t

[wladston]

Hi! I'm migrating my app from vue-i18n to vue-i18n-next. When I use <i18n-t>, I'm given this warning: 'shared.esm-bundler.js:54 [intlify] Not found parent scope. use the global scope.. I'm running on legacy mode (no components, everything in a single global scope), so I really can't understand what is causing this.

If I convert the <i18n-t> tag to normal mustache syntax with a$t() call, the warning disappears, so I believe this is somehow related to the <i18n-t> itself.

This warning is emitted in this line: https://github.com/intlify/vue-i18n-next/blob/fa4c22a62c7b67b222402e0d276b3b7445e1ed68/packages/vue-i18n-core/src/i18n.ts#L717

I suppose the code shouldn't be entering the if (scope === 'parent') block, but I wasn't able to figure out where the scope variable comes from and why it has the value parent rather than global.

Any ideas on what I'm doing wrong and how can I remote this warning?

Thank you all very much!

[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

[volarname]

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

hi its possible to define to always use global scope using some global options?
or i always need to specify at each place this:
const { t } = useI18n({ useScope: 'global' })

[codeflorist]

A global option would be greatly appreciated. It's quite unnecessary in an app, where there is only a global scope, to always have to state that global-scope with every usage of useI18n and <i18n>.

Alternatively:
Why not have global scope as a valid fallback anyway? It actually behaves just like that already. Why not document that, and get rid of those warnings, that afaics don't really report any actual problem? Or - as already suggested - make it an info and not a warning?

[frederikheld]

It would great if the scope could be defined in the t() function or if there would be an alternative function that defaults to the global scope because I often mix global locales with local definitions via <i18n> block.

Right now I'm doing it like this which is okay, but adds boilerplate:

const { t: g } = useI18n({ useScope: 'global' })
const { t } = useI18n({ useScope: 'local' })

[Tofandel]

How is this still a thing 3 years after?

[frederikheld]

I'm already used to using t and g :-D Would be great if I could just to const { t, g } = useI18n().

[wladston]

Thank you for taking the time to answer me and even improving the docs! In the course of the migration, the message stopped appearing all by itself. But I'll do this in case the message comes back!

[beakid]

How about the i18n-n component?

And is it possible to set useScope: 'global' when using the createI18n function?

Asking because I'm getting the same error but for the i18n-n component.

[firstpromoter]

yes, there's no way to disable this warning for i18n-n component, scope:'global' doesn't work. If the component is used on large lists where it has to render 1000s of times, it makes the entire component unusable in dev mode as it waits to write the logs even a minute.
@kazupon can you please help us out to remove this annoying message from i18n-n components? Why is not working with global="scope" like it does for i18n-t ?

[beakid]

Any news regarding this? @kazupon
EDIT: Looks like this was fixed here nuxt-modules/i18n#2895 Sweet! <3

[volarname]

that warning about local/global scope is so annoying for developer (because you dont want to have anything in console, only logs and real errors) - I don't understand why a global config to disable this doesn't exist. just why? let people decide if they dont want to show it and show it as default.

i am currently defining global scope on all places in my code, but when you use any 3rd party library like vuetify3@beta you have warnings everywhere because they dont define scopes and fallback to global is used
asking vuetify team to fix that? why just allow to put {disableScopeFallbackWarning:true} in i18n
its so annoying we are looking for our simple translation solution instead of i18n

[Hulkmaster]

i also would like to see global defaultScope prop or something

const i18n = createI18n({
  defaultScope: 'global',
  ...
});

[cooperok]

How to remove this message if I use only $t method inside components (with Options API)?

[nicooprat]

I think it should use console.info() instead of console.warning() because it's not an issue at all, and it makes migrating from Vue 2 to Vue 3 a bit harder as it gets mixed with real issues.

Anyway, I got rid of all warnings by overriding the useI18n composable with our own, and edit the default props of the component:

import { useI18n as useI18nLib, I18nT } from 'vue-i18n';

I18nT.props.scope.default = 'global';

export const useI18n = () => ({ ...useI18nLib, useScope: 'global' });

export const i18n = createI18n({
  useScope: 'global',
  ...
});

You can ensure nobody uses the original useI18n through an ESlint rule:

{
  rules: {
    'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: 'vue-i18n',
            importNames: ['useI18n'],
            message: "Please import useI18n from our custom wrapper instead, e.g. 'import { useI18n } from '@/i18n';'",
          },
        ],
      },
    ],
  }
}

A global option would really be appreciated.