intlify / vue-i18n

Vue I18n for Vue 3
https://vue-i18n.intlify.dev/
MIT License
2.13k stars 327 forks source link

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

Open Csszabi98 opened 1 year ago

Csszabi98 commented 1 year ago

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:

useI18n({
  __useComponent: true
})

Why is this an issue?

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

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

fixpunkt commented 1 year ago

We have the same issue without SSR: Without passing this option, translations are empty when I try to access them within Githubissues.

  • Githubissues is a development platform for aggregating issues.