intlify / intlify/bundle-tools
[Vue 2.7][vite] Custom blocks don't work in components that are written with Options API
- Dominant language
- TypeScript
- Stars
- 270
- Forks
- 46
- PR merge metrics
- No merged PRs in 30d
Description
### Reporting a bug?
I'm using vite and vue 2.7 I have an SFC that looks like this:
```vue
export default {
data() {
return {
msg: 'Hi!',
};
},
};
{
"en": {
"another_message": "Hello!"
}
}
```
The message from the custom i18n block doesn't get translated. In another component that uses script setup and composition API everything works fine
However global messages are seen from both components
### Expected behavior
I expect that cusom i18n blocks will work with both Composition API and Options API
### Reproduction
You can find the example here:
https://stackblitz.com/edit/vitejs-vite-sv4fcz?file=src%2FApp.vue,src%2FTest.vue,vite.config.js,src%2Fmain.js,package.json
### Issue Package
unplugin-vue-i18n
### System Info
```shell
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 7.17.0 - /usr/local/bin/npm
npmPackages:
vite: ^3.1.0 => 3.1.0
vue: ^2.7.10 => 2.7.10
vue-i18n: ^8.27.2 => 8.27.2
```
### Screenshot
_No response_
### Additional context
vite plugin config looks like this:
```ts
VueI18n({
bridge: false,
compositionOnly: false,
}),`
```
And heere is how I create an instance of i18n:
```ts
const i18n = castToVueI18n(
createI18n(
{
locale: 'en',
legacy: false,
silentTranslationWarn: true,
missingWarn: false,
messages: {
en: {
key: 'global value',
},
ja: {
key: 'こんにちは、{name}!',
},
},
},
VueI18n
)
);
```
### Validations
- [X] Read the [Contributing Guidelines](https://github.com/intlify/bundle-tools/blob/main/.github/contributing.md).
- [X] Read the README
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/intlify/bundle-tools/discussions).
Contributor guide
Research direction
Start with the StackBlitz reproduction files named in the issue: src/App.vue, src/Test.vue, vite.config.js, src/main.js, and package.json. Trace how the Vite plugin handles the custom i18n block for the Options API, then verify that the component's local translation works as it does with script setup while global messages remain available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100