Inline your translation messages within your components.
If you'd like to define translations per-page or per-component you can take advantage of the i18n custom block.
You can now define translations using i18n custom blocks in your Vue files:
<script setup lang="ts">
const { t } = useI18n({
useScope: 'local'
})
</script>
<template>
<p>{{ t('hello') }}</p>
</template>
<i18n lang="json">
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
</i18n>
or using the Yaml syntax:
<i18n lang="yaml">
en:
hello: 'hello world!'
ja:
hello: 'こんにちは、世界!'
</i18n>
t exported by useI18n, not $t.
To read more about $t which isn't used in per-component translation, see the "implicit with injected properties and functions" section of Vue I18n docs.