Internationalization With ember-intl

ember-intl is the de facto i18n addon — translations, plurals, dates, and numbers via ICU MessageFormat.

4 min read Level 2/5 #ember#i18n#ember-intl

What you'll learn

Install ember-intl
Add translation files under translations
Use the t helper and the intl service

ember-intl is the standard internationalization addon. It supports ICU MessageFormat for plurals, dates, numbers, and gender-aware messages.

Install

ember install ember-intl

Translation Files

Create translations/<locale>.json files at the project root:

{
  "post": {
    "title": "Welcome to the blog",
    "count": "{n, plural, =0 {No posts} one {# post} other {# posts}}"
  }
}

Place each locale in its own file: en-us.json, de-de.json, etc.

Using the t Helper

<h1>{{t "post.title"}}</h1>
<p>{{t "post.count" n=this.posts.length}}</p>

From JavaScript

import Component from '@glimmer/component';
import { service } from '@ember/service';

export default class Greeting extends Component {
  @service intl;

  get message() {
    return this.intl.t('post.title');
  }
}

Switching Locale

Set the active locale at boot (instance-initializer) or in response to a user choice:

// app/instance-initializers/locale.js
export default function initialize(appInstance) {
  const intl = appInstance.lookup('service:intl');
  intl.setLocale(['en-us']);
}

The setLocale argument is a fallback chain — first matching wins.

Testing — The Three Layers →