Translations don't work during ssr when legacy api is enabled and useI18n is used inside component setup

[Csszabi98]

Reporting a bug?

Given that vuei18n runs in legacy mode and composition is also enabled during ssr the translations are always empty when useI18n is being invoked inside component setup.

This is because the "useI18nForLegacy" implementation only populates the composer instance during the "onBeforeMount" lifecycle hook, whereas the non legacy implementation also populates it on the server side.

Workaround:

• When invoking useI18n pass in the "__useComponent: true" option, which will force useI18n to execute the non legacy implementation.

useI18n({
  __useComponent: true
})

Why is this an issue?

• The __useComponent flag appears to be an internal property and is not documented anywhere
• The __useComponent flag is not part of the type definition
• This behavior of useI18n in legacy mode is also not documented

Expected behavior

useI18n inside component setup should automatically not use the legacy implementation or the legacy implementation should populate the composer instance during ssr

Reproduction

• Download: vue-i18n-legacy-use-i18n-issue.zip
• npm install && npm run dev
• Observe the test pages

System Info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.19 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/Library/Caches/fnm_multishells/1749_1686260767593/bin/node
    npm: 8.11.0 - ~/Library/Caches/fnm_multishells/1749_1686260767593/bin/npm
  Browsers:
    Brave Browser: 101.1.38.109
    Chrome: 114.0.5735.106
    Firefox: 113.0.1
    Firefox Developer Edition: 114.0
    Safari: 16.5
  npmPackages:
    @intlify/unplugin-vue-i18n: 0.10.0 => 0.10.0
    @vitejs/plugin-vue: 4.1.0 => 4.1.0
    @vue/apollo-components: 4.0.0-beta.2 => 4.0.0-beta.2
    @vue/apollo-composable: 4.0.0-beta.3 => 4.0.0-beta.3
    @vue/apollo-option: 4.0.0-beta.2 => 4.0.0-beta.2
    @vue/server-renderer: 3.2.47 => 3.2.47
    vite: 4.2.1 => 4.2.1
    vite-plugin-ssr: 0.4.103 => 0.4.103
    vitest: 0.25.7 => 0.25.7
    vue: 3.2.47 => 3.2.47
    vue-i18n: 9.3.0-beta.19 => 9.3.0-beta.19
    vue-in-viewport-mixin: 3.1.0 => 3.1.0
    vue-recaptcha: 2.0.2 => 2.0.2
    vue-select: 4.0.0-beta.3 => 4.0.0-beta.3
    vue-tsc: 1.2.0 => 1.2.0
    vue3-perfect-scrollbar: 1.6.1 => 1.6.1
    vuex: 4.1.0 => 4.1.0

Screenshot

No response

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

[fixpunkt]

We have the same issue without SSR: Without passing this option, translations are empty when I try to access them within <script setup>. We cannot disable legacy mode at the moment as we still have a lot of legacy components.