Docs / Vue

Vue i18n, automated

Move hardcoded copy in Vue single-file components into vue-i18n $t() calls, with plurals, sentences around links via <i18n-t>, and the vue-i18n setup.

How it works

Template text and {{ }} become {{ $t('key') }}, attributes become :placeholder="$t('key')", and strings shown from <script setup> (alerts, toasts, document.title) use t() from useI18n.

Plurals use vue-i18n’s pipe format with each language’s plural rules, and sentences around links stay one message with <i18n-t>.

Before and after

The engine’s real output for this file. In a real run, the hosted model names the keys from context.

src/components/InviteTeam.vue · before

<template>
  <section>
    <h2>Invite people to {{ team.name }}</h2>
    <p>{{ seats }} {{ seats === 1 ? 'seat' : 'seats' }} left on your plan</p>
    <input placeholder="name@company.com" />
    <p>Read the <a href="/docs">docs</a> first.</p>
  </section>
</template>

src/components/InviteTeam.vue · after

<template>
  <section>
    <h2>{{ $t('invite_team.invite_people_to', { name: team.name }) }}</h2>
    <p>{{ $t('invite_team.seats_left_on_your_plan', { count: seats }, seats) }}</p>
    <input placeholder="name@company.com" />
    <p><i18n-t keypath="invite_team.read_the_first" scope="global"><template #a><a href="/docs">{{ $t('invite_team.docs') }}</a></template></i18n-t></p>
  </section>
</template>

locales/en.json

{
  "invite_team": {
    "invite_people_to": "Invite people to {name}",
    "seats_left_on_your_plan": "{count} seat left on your plan | {count} seats left on your plan",
    "docs": "docs",
    "read_the_first": "Read the {a} first."
  }
}

What the setup adds

The first run sets up vue-i18n if the project doesn’t have it yet:

vue-i18n in package.json
src/i18n.ts with every locale and plural rules, installed with app.use(i18n) in main.ts
An existing createI18n setup is left as it is

Run it

The CLI needs Node.js 22 or later.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Or add the GitHub Action and get a pull request on every push. Try it on your own code first in the playground.