Quickstart (Addons)

1. Install ember-intl

TIP

ember-intl adds helpers and a service to an app's namespace. To ensure that the app ends up with a single copy of ember-intl, we recommend installing ember-intl in the addon as a peer dependency, not as a dependency. The addon may decide which major version(s) of ember-intl to support at a given time.

To lint and test files within the addon package, install ember-intl as a development dependency as well. pnpm provides the option --save-peer to do both installations at once.

v1 addons

Use your package manager to install ember-intl as a peer and development dependency. If the dummy app needs translations for documentation or testing, install @ember-intl/v1-compat as a development dependency.

pnpm add --save-peer ember-intl
pnpm add -D @ember-intl/v1-compat

If your addon provides translations, create the folder translations as a sibling to addon.

my-v1-addon
├── addon
└── translations

There's nothing more to do for publishing your addon with translations. Ember automatically includes the files in the translations folder.

v2 addons

Use your package manager to install ember-intl as a peer and development dependency.

pnpm add --save-peer ember-intl

If your addon provides translations, create the folder translations as a sibling to src.

my-v2-addon
├── src
└── translations

To publish your addon with translations, you need to add the translations folder to the files field in package.json.

package.json

{
  "name": "my-v2-addon",
  "files": [
    "addon-main.cjs",
    "declarations",
    "dist",
    "translations"
  ]
}

2. Define translations

Create a translation in translations/en-us.yaml.

translations/en-us.yaml

hello.message: "Hello, {name}!"

TIP

You can override an addon's translation in the consuming app. If the app uses the same key in its own translation file, the app's translation always wins.

v1 addons

To render the translation, import the t helper and call it in a <template> tag.

addon/components/hello.gts

import type { TOC } from '@ember/component/template-only';
import { t } from 'ember-intl';

interface HelloSignature {
  Args: {
    name: string;
  };
}

const Hello: TOC<HelloSignature> = <template>
  {{t "hello.message" name=@name}}
</template>;

export default Hello;

NOTE

V1 addons must list ember-template-imports as a dependency if you use <template> tags in components.

v2 addons

To render the translation, import the t helper and call it in a <template> tag.

src/components/hello.gts

import type { TOC } from '@ember/component/template-only';
import { t } from 'ember-intl';

interface HelloSignature {
  Args: {
    name: string;
  };
}

const Hello: TOC<HelloSignature> = <template>
  {{t "hello.message" name=@name}}
</template>;

export default Hello;

NOTE

V2 addons don't need ember-template-imports. Instead, you declare how to compile the *.{gjs,gts} files in rollup.config.mjs.

3. Define languages

Follow Quickstart (Apps) - 3. Define languages.

4. Set up ember-intl

If the routes of your test app need translations, follow Quickstart (Apps) - 4. Set up ember-intl and update this file.

• v1 addons: tests/dummy/app/routes/application.ts
• v2 addons: app/routes/application.ts

5. Configure linters

For more information, see Quickstart (Apps) - 5. Configure linters. For brevity, only the differences are noted below.

@ember-intl/lint

There are no differences.

eslint

There are no differences.

glint

If you use glint v1 and "loose mode" templates, then update this file.

• v1 addons: types/global.d.ts
• v2 addons: unpublished-development-types/index.d.ts

Miscellaneous

There are no differences.