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

[ldsenow]

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.

[ldsenow]

I followed your instruction and set the compositionOnly to false and restarted the process. However, i still have the same issue.
BTW, I am using class component, not sure if makes any differerence.

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueI18n from "@intlify/vite-plugin-vue-i18n";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      compositionOnly: false,
      include: path.resolve(__dirname, "src/locales/**"),
    }),
  ],
});

[ldsenow]

I updated the vue-i18n version to rc.7 and it works now. My 2c feedback is compositionOnly should be true for this release as majority of people are migrating from vue2 to vue3. Just to keep the behavior the same and they can choose to opt-in when they are available to do that.

[ldsenow]

I guess the update was corrected the legacy mode.

[kazupon]

Thank you for your feedback!
I'll try to consider it. :)

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

[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