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

npm install @intl-ai/unplugin vue-i18n

pnpm

pnpm add @intl-ai/unplugin vue-i18n

yarn

yarn add @intl-ai/unplugin vue-i18n

bun

bun add @intl-ai/unplugin vue-i18n

You only need @intl-ai/unplugin. The translation engine lives in @intl-ai/api and is bundled automatically.

Configuration

Create an intl-ai.config.ts (or .json) at your project root. See Configuration for the full schema. For a live Vercel AI SDK model instance:

import { createOpenAICompatible } from "@ai-sdk/openai-compatible";

const openai = createOpenAICompatible({
  name: "openai",
  baseURL: "https://api.openai.com/v1",
  apiKey: process.env.OPENAI_API_KEY,
});

export default {
  model: openai("your-model-name"),
  defaultLocale: "en",
  locales: ["en", "es", "fr"],
  localeDir: "./locales",
  processor: "icu",
};

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 your config so AI-generated translations preserve ICU placeholders correctly.