Per-component translations don't work in Options API

[TheDutchCoder]

Reporting a bug?

Vue3 officially supports both the Options API and Composition API.
This plugin should provide per-component translations with the Options API as well (it currently doesn't), this seems like a regression.

Expected behavior

Translations to work locally with the <i18n> SFC block and the Options API.

Reproduction

https://stackblitz.com/edit/vitejs-vite-xfejmg?file=src%2FApp.vue

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: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.9.2 - /usr/local/bin/pnpm
  npmPackages:
    @intlify/unplugin-vue-i18n: ^1.0.1 => 1.0.1 
    @vitejs/plugin-vue: ^4.2.3 => 4.3.4 
    vite: ^4.4.9 => 4.4.9 
    vue: ^3.3.4 => 3.3.4 
    vue-i18n: ^9.3.0 => 9.3.0 
    vue-tsc: ^1.8.8 => 1.8.10

Screenshot

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• 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 Discussions

[kazupon]

Thank you for your reporting!

In Vue-i18n v9 composition API mode, $t always acts as a global scope, as noted in the docs.
https://vue-i18n.intlify.dev/guide/advanced/composition.html#implicit-with-injected-properties-and-functions

This means that you cannot access custom blocks resources defined in Vue components.
You need to use t exported with useI18n in the Vue component.

[TheDutchCoder]

@kazupon

Thanks for the reply, but I'm confused by this decision.

Vue3 has 2 official API's, I'm not against breaking changes in major versions (that's fine), but not actually supporting one of the APIs goes a bit far (in my opinion).

We have a really large enterprise project in Nuxt2. Since Nuxt2 and Vue2 will be EOL soon, we need to move to Nuxt3.
This is already a huge undertaking, but having to refactor literally every component and page in our codebase because the nuxt/i18n module doesn't support all functionality through the Options API is a really big problem.

Is there no way to expose another global method that automatically uses local scope? So we could search/replace $t with something like $tl or something and be done, instead of having to add a script setup block to every page/component in our codebase and replace $t with t.

It would be great if you could reconsider your decision, especially in light of Vue3 still fully supporting the Options API.

[kazupon]

We have a really large enterprise project in Nuxt2. Since Nuxt2 and Vue2 will be EOL soon, we need to move to Nuxt3. This is already a huge undertaking, but having to refactor literally every component and page in our codebase because the nuxt/i18n module doesn't support all functionality through the Options API is a really big problem.

Thank you for your feedback.

We would like to support migration too, but the EOL schedule for Vue 2 / Nuxt 2 makes it really tough... 😞

The behavior of $t in vue-i18n is implemented under the influence of constraints in app.config.globalProperties.
Changing it to also work with local scope requires a change in vue-i18n's internal architecture. It is a change comparable to a major version of vue-i18n...