Property "$tc" was accessed during render but is not defined on instance.

[suibansheng]

Reporting a bug?

walletHeader.vue:25 Uncaught (in promise) TypeError: _ctx.$tc is not a function

https://stackblitz.com/edit/vitejs-vite-nfb6mr?file=src%2FApp.vue

Expected behavior

[Vue warn]: Property "$tc" was accessed during render but is not defined on instance.

Reproduction

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      list: ['1', '2', '3'],
    },
  },
});

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ $tc('list', 1) }}</h1>
</template>

System Info

System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 206.11 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.14.2 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.60
    Edge: 124.0.2478.51
    Safari: 15.3
  npmPackages:
    @intlify/unplugin-vue-i18n: ^4.0.0 => 4.0.0 
    @vitejs/plugin-legacy: ^5.3.0 => 5.3.1 
    @vitejs/plugin-vue: ^5.0.3 => 5.0.4 
    @vitejs/plugin-vue-jsx: ^3.1.0 => 3.1.0 
    vite: ^5.0.12 => 5.1.4 
    vite-plugin-mock-dev-server: ^1.4.7 => 1.4.7 
    vite-plugin-vconsole: ^2.1.1 => 2.1.1 
    vite-plugin-vue-devtools: ^7.0.14 => 7.0.16 
    vite-plugin-vue-layouts: ^0.11.0 => 0.11.0 
    vitest: ^1.2.2 => 1.3.1 
    vue: ^3.4.15 => 3.4.21 
    vue-i18n: 9 => 9.13.0 
    vue-qrcode-image: ^1.2.0 => 1.2.0 
    vue-router: ^4.2.5 => 4.3.0 
    vue-tsc: ^1.8.27 => 1.8.27

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 Discussions

[kazupon]

Thank you for your reporting!

You are using Vue I18n compostion API mode.
In that case, the API prefixed with $ operates in the global scope.
$tc is not provided in Composition API mode, it's Legayc API mode only.
it can be used with $t as follows.

resources:

{
   "car": "car | cars",
 }

template:

<template>
  <h1>{{ $t('car', 1) }}</h1>
</template>

PS:
To reduce the cognitive load caused by the difference in detailed behavior between Legacy API and Composition API,
I am currently working on v10, I’ll merge legacy API $tc into $t.