TypeError: _ctx.$t is not a function when using $t in child component

vue & vue-i18n version

• vue: 3.0.0
• vue-i18n: 9.0.0-rc.7

Reproduction Link

https://github.com/boussadjra/vue3-tailwind2

Steps to reproduce

I added a file named i18n.ts next to main.ts which contains the following snippet :

import { createI18n } from "vue-i18n";

const i18n = createI18n({
  legacy: false,
  locale: "ja",
  messages: {
    en: {
      message: {
        language: "English",
        greeting: "Hello !"
      }
    },
    ar: {
      message: {
        language: "العربية",
        greeting: "السلام عليكم"
      }
    },
    es: {
      message: {
        language: "Español",
        greeting: "Hola !"
      }
    }
  }
});
export default i18n;

then I imported the file inside main.ts and use it :

...
import i18n from './i18n'
let root = app.use(i18n).use(store).use(router).mount('#app')

then I added the following snippet to home.vue :

<h2>{{ $t("message.greeting", {}, { locale: "en" }) }}</h2>

What is Expected?

Render the message Hello !

What is actually happening?

but this is giving the following error :

Uncaught (in promise) TypeError: _ctx.$t is not a function at Proxy.render (Home.vue?bb51:2)

[danielpetrica]

Hi, I think this may be similar to my issue, I found out that to have the global $t injected like on previous version I neet to pass globalInjection: true, in the createI18n() function options.

So your i18n.ts may look like this:

import { createI18n } from "vue-i18n";

const i18n = createI18n({
  legacy: false,
  locale: "ja",
  globalInjection: true,
  messages: {
    en: {
      message: {
        language: "English",
        greeting: "Hello !"
      }
    },
    ar: {
      message: {
        language: "العربية",
        greeting: "السلام عليكم"
      }
    },
    es: {
      message: {
        language: "Español",
        greeting: "Hola !"
      }
    }
  }
});
export default i18n;

[hks2002]

Vue3 and vue-i18n-next sample, it could works as bellow:

<template>
  <q-page class="flex flex-center">
    <img alt="Quasar logo" src="/imgs/logo.svg" />
    <div>{{ t("success") }}</div>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";

export default defineComponent({
  name: "PageIndex",
  setup() {
    const { t } = useI18n();
    return {
      t,
    };
  },
});
</script>

• import useI18n:

import { useI18n } from "vue-i18n";

• define function in setup():

const { t } = useI18n();

• using t in the template:

<div>{{ t("success") }}</div>