<i18n> block works in view but not in component

[frederikheld]

Reporting a bug?

Vite is configured as stated in the docs: https://vue-i18n.intlify.dev/guide/advanced/sfc.html. My default locale is 'de-DE'.

Put the reproduction code into a view (aka SFC in the 'views' directory) and it will display the localized string as expected.

Put the exact same code into a component (aka SFC in the 'components' directory) that is then used inside a view and it will throw the following errors:

[intlify] Not found parent scope. use the global scope. [shared.mjs:159:16](http://localhost:5173/node_modules/vue-i18n/node_modules/@intlify/shared/dist/shared.mjs)
[intlify] Not found 'explanation' key in 'de-DE' locale messages. [shared.mjs:159:16](http://localhost:5173/node_modules/@intlify/core-base/node_modules/@intlify/shared/dist/shared.mjs)
[intlify] Fall back to translate 'explanation' key with 'de' locale. [shared.mjs:159:16](http://localhost:5173/node_modules/@intlify/core-base/node_modules/@intlify/shared/dist/shared.mjs)
[intlify] Not found 'explanation' key in 'de' locale messages.

So apparently the scope is based on the view?

If I leave the <i18n> block in the view and use the <template> in the component that is inside the view, it works. But to use the block that way doesn't make any sense.

Expected behavior

The <i18n> block should work in a component the same way it does in a view.

If the fact, that it does not, is by design, this should be explained in the docs.

Reproduction

<script setup lang="ts">

</script>

<template>
  <div>
      <i18n-t keypath="explanation" tag="p">
        <template #reason>
          <b>Some reason that comes from a variable</b>
        </template>
    </i18n-t>
  </div>
</template>

<i18n>
  {
    "en-US": {
      "explanation": "This happens because of {reason}."
    },
    "de-DE": {
      "explanation": "Das passiert wegen {reason}."
    }
  }
</i18n>

System Info

npmPackages:
    @intlify/core-base: 9.10.2 => 9.10.2 
    @intlify/unplugin-vue-i18n: 4.0.0 => 4.0.0 
    @vitejs/plugin-vue: 5.0.4 => 5.0.4 
    @vue/eslint-config-prettier: 8.0.0 => 8.0.0 
    @vue/eslint-config-typescript: 12.0.0 => 12.0.0 
    @vue/test-utils: 2.4.5 => 2.4.5 
    @vue/tsconfig: 0.5.1 => 0.5.1 
    vite: 5.1.6 => 5.1.6 
    vite-plugin-vue-devtools: 7.0.18 => 7.0.18 
    vite-plugin-vuetify: 2.0.3 => 2.0.3 
    vitest: 1.4.0 => 1.4.0 
    vue: 3.4.21 => 3.4.21 
    vue-i18n: 9.10.2 => 9.10.2 
    vue-router: 4.3.0 => 4.3.0 
    vue-tsc: 2.0.6 => 2.0.6 
    vuetify: 3.6.5 => 3.6.5

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussions