Error when trying to translate in the missing handler

[elite-tat]

Reporting a bug?

I try to translate a key through the MissingHandler with vuei18n, but I get the following error: vm.$t is not a function. My goal is to ensure that a key is replaced, with a parent key, if it is not found.

Expected behavior

The expected behavior is to have the $t function in vm object to use it in the MissingHandler.

Reproduction

export const i18n = createI18n({
    messages,
    legacy: false,
    locale: 'en',
    missing: (locale: Locale, key: Path, vm: Vue, values) => {
        if (key.includes('.')) {
            const newKey = /\.(.+)/.exec(key)[1]
            return vm.$t(newKey) as string
        }
        return key
    },
})

export const install: UserModule = ({ app }) => {
    app.use(i18n)
}

System Info

System:
    OS: macOS 12.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Memory: 360.68 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.1 - /usr/local/bin/node
    npm: 8.3.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Safari: 15.2

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 Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[kazuya kawaguchi]

Thank you for your feedback!

This repo is for vue-i18n v8.x, not vue-i18n v9.x.
You need to open in the below repo URL
https://github.com/intlify/vue-i18n-next

for this reason, close
Thanks!