Per-component translations

Enable vue-i18n-loader.

If you'd like to define translations per-page or per-component you can take advantage with 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'
<p>{{ t('hello') }}</p>
<i18n lang="json">
"en": {
"hello": "hello world!"
"ja": {
"hello": "こんにちは、世界!"

or using the Yaml syntax:

<i18n lang="yaml">
hello: 'hello world!'
hello: 'こんにちは、世界!'
Read more about i18n custom blocks
When you use per-component Translations, you need t which is exported by useI18n, not $t. About $t which isn't used in per-component translation, see also "Implicit with injected properties and functions" section of Vue I18n docs.