Property "$tc" was accessed during render but is not defined on instance.
suibansheng opened this issue · comments
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
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
.