After upgrading my project I'm getting this warning for every time I try to use VueI18n.t() inside computed varaibles:
[Vue warn]: getCurrentInstance() called inside a computed getter. This is incorrect usage as computed getters are not guaranteed to be executed with an active component instance. If you are using a composable inside a computed getter, move it ouside to the setup scope.
This is be a minimal example of it being triggered
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
const { t } = useI18n()
const props = defineProps<{
infot: string
}>()
const label = computed(() => t(props.infot))
</script>
libraries versions:
"vue": "^3.4.6",
"vue-i18n": "^9.9.0",
"vite": "^5.0.11",
"@vitejs/plugin-vue": "^5.0.2",
"typescript": "^5.3.3",
I've tried using the global $t() but obviously it didn't work.
const label = computed(() => $t(props.infot))
The warning goes away if I define the variable as a function and call it like this:
function label() { return t(props.infot) }
or if I define it as a composable and use it like this
const { label } = translateLabel(toRef(props, 'infot'))
I don't like the previous solutions because in the VueI18n documentation they use t() inside computed variables without problems. And having to change all the occurrencies inside the codebase would be kinda taxing. Am I missing something? Anyone else having this problem?
Just upgrade vue to v3.4.7. That should fix your problem.
For more informations : https://github.com/vuejs/core/discussions/9974