`<i18n>` block works in view but not in component
frederikheld opened this issue · comments
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