$i18n – Plugin Localization API

$i18n provides plugin-scoped internationalization (i18n) similar to vue-i18n, but isolated per plugin.

const { $i18n } = usePluginApi()

---

Core Usage

Translate keys defined inside a plugin:

{{ $i18n.t("title") }}

---

Plugin Translation Definition

Translations are defined inside the plugin frontend config:

import { defineRaclettePluginFrontend } from "@raclettejs/core/frontend"

export default defineRaclettePluginFrontend({
  i18n: {
    de: {
      title: "Todo Widget",
      translated: "Ich bin auf deutsch",
    },
    en: {
      title: "Todo Widget",
      translated: "I'm in english",
    },
  },
})

---

How $i18n.t() works

$i18n.t("title")

• Looks up the key in the current language
• Returns the translated string
• Falls back if missing

---

Language Resolution

The active language is resolved in this order:

1. User-selected UI language
2. Closest matching locale (region fallback)
3. Plugin fallback language

Example

• en-US → falls back to en
• de-CH → falls back to de
• missing → next closest available locale

---

Supported Locales

Defined globally in:

raclette.config.js

frontend: {
  i18n: {
    locales: ["de-EU", "en-EU"]
  }
}

---

Plugin vs Global i18n

$i18n (plugin scope)

• Only for plugin UI text
• Defined inside plugin frontend config
• Automatically scoped per plugin

vue-i18n (global scope)

Used for app-wide formatting and shared translations:

import { useI18n } from "vue-i18n"

const globalI18n = useI18n()

---

Global Formatting Example (Dates)

globalI18n.d(new Date(date), "short")

---

Key Differences

Feature	$i18n	vue-i18n
Scope	Plugin	Global
Purpose	UI text in plugins	App-wide formatting
Source	Plugin frontend config	Core i18n
Access	$i18n.t()	globalI18n.t()

---

Find all core i18n files and data formats in the core repo here @raclettejs/core/services/frontend/src/orchestrator/i18n

Key Takeaways

• $i18n is plugin-local i18n
• It behaves like Vue I18n but is scoped per plugin
• Automatically respects current UI language
• Supports fallback to closest matching locale
• Global formatting still uses vue-i18n