Vue (vue-i18n)

Vue (vue-i18n)

This guide covers vue-i18n consumption. For bundler setup, see Build systems.

Overview

intl-ai generates translation JSON files at build time. vue-i18n consumes these files at runtime in your Vue application. This guide shows how to set up both tools together.

Installation

Install intl-ai and vue-i18n:

npm install @intl-ai/unplugin vue-i18n

pnpm add @intl-ai/unplugin vue-i18n

yarn add @intl-ai/unplugin vue-i18n

bun add @intl-ai/unplugin vue-i18n

You only need @intl-ai/unplugin. It runs the intl-ai binary, which the intl-ai npm package installs automatically.

Configuration

Create an intl-ai.toml at your project root. See Configuration for the full schema.

locale_dir = "locales"
source = "en"
targets = ["es", "fr"]
processor = "icu"

[provider]
kind = "http"
base_url = "https://api.openai.com/v1"
model = "your-model-name"
api_key = "${env:OPENAI_API_KEY}"

Vue App Setup

Locale File Structure

intl-ai generates JSON files like:

// locales/en.json
{
  "greeting": "Hello, {name}!",
  "items": {
    "one": "You have {count} item",
    "other": "You have {count} items"
  }
}

Create i18n Instance

import { createI18n } from "vue-i18n";
import en from "./locales/en.json";
import es from "./locales/es.json";

const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
  messages: { en, es },
});

app.use(i18n);

Using Translations

In Vue templates:

<template>
  <p>{{ $t("greeting", { name: "World" }) }}</p>
  <p>{{ $t("items.one", { count: 5 }) }}</p>
</template>

In Composition API:

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

Processor Note

vue-i18n supports ICU MessageFormat. Set processor = "icu" in intl-ai.toml so AI-generated translations preserve ICU placeholders correctly.