12.per-component-translations.md

title	description
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'
})
</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>

::alert{type="info"} Read more about i18n custom blocks ::