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

[YanZaytsev]

Reporting a bug?

I'm using vite and vue 2.7 I have an SFC that looks like this:

<script lang="ts">
export default {
  data() {
    return {
      msg: 'Hi!',
    };
  },
};
</script>

<template>
  <div>
    <div>{{ msg }}</div>
    <div>{{ $t('another_message') }}</div>
  </div>
</template>

<i18n lang="json">
{
  "en": {
    "another_message": "Hello!"
  }
}
</i18n>

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

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:

VueI18n({
    bridge: false,
    compositionOnly: false,
}),`

And heere is how I create an instance of i18n:

const i18n = castToVueI18n(
 createI18n(
   {
     locale: 'en',
     legacy: false,
     silentTranslationWarn: true,
     missingWarn: false,
     messages: {
       en: {
         key: 'global value',
       },
       ja: {
         key: 'こんにちは、{name}！',
       },
     },
   },
   VueI18n
 )
);

Validations

• Read the Contributing Guidelines.
• Read the README
• 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 Discussion.

[UncleTolya]

+i have the same trouble :(

[Mordukar]

• faced with the same

[dparish]

You get another issue if you set bridge to true in the Vite plugin
The app won't render and in the javascript console you get:

Uncaught TypeError: Cannot read properties of undefined (reading '__i18n')

This also does not work (with $t)

<template>
  <div style="margin: 5rem;">
    <h1>{{$t('hi')}}</h1>
  </div>
</template>

<script lang='ts'>
import {defineComponent} from "vue";

export default defineComponent({
  name: 'App'
})
</script>

<i18n>
{
  "en": {
    "hi": "Hello"
  }
}
</i18n>

P.S. I tried to create some unit tests in this repo to reproduce the problem but it looks like the tests are all running against Vue 3. I get it btw I have no idea how I would create a repo where I could test against two separate major releases.

[kazupon]

Thank you for your reporting!
This is a bug for @vitejs/plugin-vue2
When we will configure bridge: true options on vite.config.ts, cusomt block resources should be bundled for options API

[YanZaytsev]

@kazupon hello! Is there any estimation of when this problem will be solved?