Per-Component Translations

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'

  <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 will need to use 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.

Copyright © 2024