Vite + Vue3 (SFC) TypeError: this.$t is not a function

vue & vue-i18n version

• vue: 3.0.5
• vue-i18n: 9.0.0-rc.6
• vite: 2.0.0-beta.69

Hi, I am upgrading my Vue2 project to vue3 and followed the vue 3 and vue-i18n-next docs to setup the project using Vite. However, I get this.$t is not a function error in my SFC vue component. BTW, I am using the legacy options api.

It seems the global $t is not assigned for some reason. Looking for some hints to resolve this issue.

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
...
import { createI18n } from "vue-i18n";

const app = createApp(App);

const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
  silentFallbackWarn: true,
  messages: {
    en: {
      title: "Hello",
    },
  },
});

app.use(i18n);
app.mount("#app");

// App.vue

<template>
  <div>{{ $t('title') }}</div>
  ...
</template>

<script lang="ts">
export default {
};
</script>

[kazupon]

Thank you for your feedback.

Sorry, poor documentation. If you don’t configure vue-plugin-vue-i18n plugin compositionOnly to false, you need to configure it. https://github.com/intlify/vite-plugin-vue-i18n#compositiononly

When this plugin set to your app, it will work for Composition API as default.

[tiagoapp]

Thank you for your feedback! I’ll try to consider it. 😃

Now that your issue has been resolved, so I close this issue. Thanks

Hi,

I’m not sure what I am missing… but how can I load the SFC messages instead?

// main.js
import { createApp } from "vue";
import { createI18n } from "vue-i18n";

import App from "./App.vue";

const app = createApp(App);

const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
});

app.use(i18n);
app.mount("#app");

// App.vue
<i18n lang="yalm">
en:
   hello: 'hello world'
</i18n>

<template>
msg: {{ $t('hello') }}
</template>

I’ve pretty much tried everything… enable and disable legacy mode, set the compositionOnly: false… and the globalInjection: true

If I don’t set globalInjection: true I get the TypeError: _ctx.$t is not a function....

But if i set it to true, then the messages I put inside the SFC doesn’t load.

How can I get this to work? Thanks