Support i18n custom blocks for Vue SFC

[milespetrov]

What framework do you want to have? Please provide links of its i18n solution/package. @intlify/vite-plugin-vue-i18n

Please provide some overall screenshots about how the i18n usage would be like Example

<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>{{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
  name: 'App',
  setup() {
    const { locale, t } = useI18n({
      inheritLocale: true
    })

    return { locale, t }
  }
}
</script>

<i18n>
{
  "en": {
    "language": "Language",
    "hello": "hello, world!"
  },
  "ja": {
    "language": "言語",
    "hello": "こんにちは、世界！"
  }
}
</i18n>

Additional context

@intlify/vue-i18n-loader is already supported, so this shouldn't be too much effort.

[ytx222]

I have the same need

[ytx222]

Saya mengelola berdasarkan cakupan lokal, kompleksitasnya bisa rumit, misalnya, ada beberapa file yang menyediakan terjemahan pada saat yang sama, setiap file memiliki dua bahasa, atau beberapa cakupan digunakan pada saat yang sama

const { t } = useI18n({ fallbackRoot: false, useScope: 'local' });
const { t: globalT } = useI18n({ fallbackRoot: false, useScope: 'global' });

[olemarius]

I'm facing an issue with the locale files becoming too big in my project, so we're looking into using instead, so if we have HelloWorldA.vue HelloWorldB.vue and HelloWorldC.vue they could all get /locales/WorldGreetings.json

Unfortunately, both this strategy and inline { ...} will not be detected by i18n ally so this feature would be much appreciated

[kingyue737]

Already supported. Just add "vue-sfc" in enabledFrameworks.

"i18n-ally.enabledFrameworks": ["vue-sfc", "vue"]

i18n-Ally doesn't detect @intlify/vite-plugin-vue-i18n and @intlify/unplugin-vue-i18n. I've opened a PR to fix it.

[Eternal-Rise]

@kingyue737 , do we need any extra settings except i18n-ally.enabledFrameworks? Because every time I open my project i18n-Ally asks me to define the locales directory. But we haven't a particular directory when using <i18n> block in SFC. So, if I ignore this option - the extension just doesn't work. Otherways, it says to me "No locale files loaded"

[reslear]

same

[onurusluca]

Is this fixed? I can't still get it working with @intlify/unplugin-vue-i18n.

[navishachiku]

Is there a way to support the source path of vue-sfc?

<i18n src="./Language.json" />

Reference: https://kazupon.github.io/vue-i18n/guide/sfc.html#multiple-custom-blocks