vue-i18n

The vue-i18n preset supports vue-i18n and petite-vue-i18n.

Detection

The preset applies when the project depends on vue-i18n, vuex-i18n, petite-vue-i18n, vue-i18n-bridge, or any @intlify/* package.

import { vueI18n } from '@x18n/cli/presets'
import { defineConfig } from '@x18n/core'

export default defineConfig({
  presets: [vueI18n()],
})

Supported syntax

These names count as translate calls: $t, t, tc, $tc, te, $te, tm, $tm, i18n.t, i18n.global.t, $i18n.t, i18n.tc and i18n.te. useI18n() is a factory: the t, tc, te and tm that it returns count too.

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const title = t('app.title')
</script>

<template>
  <h1>{{ $t('app.greeting', { name: 'Ada' }) }}</h1>
  <p>{{ t(`pages.${page}.title`) }}</p>
  <a v-t="'nav.home'" />
  <a v-t="{ path: 'nav.about' }" />
  <i18n-t keypath="app.terms" tag="p" />
</template>

The Vue scanner reads the <script> blocks and every template expression. It also reads the v-t directive, and the key attribute of the <i18n-t> (or I18nT) component, the <i18n> component and <i18n-d>.

Locale files

The preset sets no resource patterns. Without resources in the config, x18n looks for directories such as locales.

The preset also reads <i18n> blocks in .vue files. A block can hold one locale, or every locale:

<i18n locale="en">
{ "hello": "Hello" }
</i18n>

<i18n lang="yaml">
en:
  hello: Hello
de:
  hello: Hallo
</i18n>

The lang attribute picks the format: json (the default), json5, yaml or yml. Each block and locale is a resource, so edits from x18n write back into the block.

Placeholders

• Named interpolation: {name}.
• Linked messages: @:key and @.modifier:key. The linked key counts as used, and the invalid-syntax check reports a linked key that does not exist.

Extraction templates