intlify / intlify/bundle-tools

[Vue 2.7][vite] Custom blocks don't work in components that are written with Options API

Open
#218 5 comments 3 reactions 0 assignees View on GitHub
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!',
};
},
};


{{ msg }}

{{ $t('another_message') }}

{
"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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.