vite-plugin-vue-i18n custom block messages aren't loaded

[ldsenow]

Reporting a bug?

Hi guys,

I have been using custom blocks in sfc for a while.

I migrated from Vue 2 to 3 and Vue i18n from v8 to 9. I used vue cli and vue i18n loader for the custom block. Since the migration, i now use vue 3 + Vue i18n v9 + vite vite-plugin-vue-i18n.

I want to use the legacy api for i18n to minimize the page migration work. However, $t only picks up the global resources loaded from vite.config and my i18n setting below

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
      compositionOnly: false,
      include: resolve(__dirname, "./src/locales/**"),
    }),
  ],
});

import { createI18n } from "vue-i18n";
import messages from "@intlify/vite-plugin-vue-i18n/messages";

const i18n = createI18n({
  legacy: true, // you must set `false`, to use Composition API
  locale: 'en-US',
  fallbackLocale: 'en-US',
  messages,
});

The custom block doesnt seem to be loaded into the instance for some reason.

Is it a bug or not supported or I missed something?

Expected behavior

custom block messages should be loaded ### Reproduction see description above ### Issue Package vite-plugin-vue-i18n ### System Info ```shell System: OS: Windows 10 10.0.22598 CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz Memory: 10.05 GB / 31.71 GB Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22598.200.0), Chromium (101.0.1210.39) Internet Explorer: 11.0.22598.1 ``` ### Screenshot _No response_ ### Additional context _No response_ ### 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).

[kingyue737]

I'm using vue-i18n-bridge with vite-plugin-vue-i18n in composition mode. Custom block messages aren't loaded either.

[UI-Mario]

I tried to use custom block with vue3 in legacy mode, and it works，code below https://stackblitz.com/edit/vitejs-vite-7wz2pl?file=src/App.vue

But I don't konw how to use i18n like this with vue2, can anyone help me?

[mmorainville]

Same problem here. I'm trying to progressively a big project to Vue 3 and trying to at least get vue-i18n to work with SFC blocks and Vite with Vue 2.7 while relying on global $t() function. Global messages coming from files are ok, but SFC blocks are not interpreted.

I've tried a lot of variations, including unplugin-vue and the bundle tools.

[NexZhu]

Same with Nuxt3 + unplugin-vue-i18n

[NexZhu]

Vue's context.messages doesn't include locales defined in SFCs

[kazupon]

Sorry I have not been able to reply for a while now.

I have been focused on nuxtjs/i18n for a while now. I recently released a nutxjs/i18n beta version of it and will be looking at an issue soon.

Pleases wait🙏

[NexZhu]

Sorry I have not been able to reply for a while now.

I have been focused on nuxtjs/i18n for a while now. I recently released a nutxjs/i18n beta version of it and will be looking at an issue soon.

Pleases wait🙏

Thanks for the hard work. Btw, will nuxtjs/i18n work with this plugin? What's the benefits of using it over pure plugin/i18n.ts with this plugin in a Nuxt project?

[beda42]

One year later, I am still experiencing this problem. Any progress? Anyone has found a workaround?

[vAhyThe]

@kazupon any progress thanks ?

[medialwerk]

I also encountered this problem and I solved it with the composable useI18n. The composable works with custom block messages, but the $t function does not.

<template>
<h1>{{ t('headline') }}</h1>
</template>

<i18n lang="json5">
{
  de: {
    headline: 'Überschrift'
  },
  en: {
    headline: 'Headline'
  },
}
</i18n>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>