Skip to content

Issue with allowComposition #1170

Open
Open
@kefniark

Description

@kefniark

Reporting a bug?

After upgrading to 9.2.2, I'm getting some errors on a vue2 project moved to vue3 and composition api (done at ~80%).
We are rewriting components but its a big project and there are still few $t and $tc in templates that we cant instantly replace and use legacy: false

The setup is really similar to the documentation one, just using the recent allowComposition flag

  const i18n = createI18n({
    allowComposition: true,
    locale: 'ja',
    fallbackLocale: ['en'],
    messages
  })

It mostly work and I can see my contents, but the problem is during initialization

import { useI18n } from 'vue-i18n'

const i18n = useI18n()
console.log(i18n.locale.value)

watch(() => i18n.locale.value, (locale) => {
  console.log(locale)
})

returns me

en-US <--- this is wrong
ja

so sometimes, I get some operation like API call done with the wrong locale ... with a value not even in my list of locales.
and later vue-18n set the right value but it could be too late already.

Expected behavior

If I stop using this allowComposition flag, this issue seem to disappear and I get the right value directly

// allowComposition: true,
legacy: false,

ja

No en-US locale for a short amount of time.

Reproduction

https://codesandbox.io/s/adoring-banach-5lbyld?file=/src/main.js

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz    
    Memory: 3.22 GB / 31.94 GB
  Binaries:
    Node: 18.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 105.0.5195.102
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-vue: ^3.0.0 => 3.1.0 
    vite: ^3.0.0 => 3.1.0 
    vitest: ^0.9.0 => 0.9.4 
    vue-tsc: 0.33.9 => 0.33.9

Screenshot

image

Additional context

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: BugBug or Bug fixes🔨 p3-minor-bugPriority 3: a bug in an edge case that only affects very specific usage

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions