@ember-intl/vite

Loads translations in v2 apps with ember-intl

Quickstart

1. Install @ember-intl/vite as a development dependency.1,2

pnpm add -D @ember-intl/vite

1. V2 apps (Embroider + Vite) need this package.

2. V2 addons need it if their test app lives in the same package as the addon (not recommended).

2. In vite.config.mjs, add loadTranslations to the list of plugins.

+ import { loadTranslations } from '@ember-intl/vite';
import { classicEmberSupport, ember, extensions } from '@embroider/vite';
import { babel } from '@rollup/plugin-babel';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    classicEmberSupport(),
    ember(),
    babel({
      babelHelpers: 'runtime',
      extensions,
    }),
+     loadTranslations(),
  ],
});

3. In tsconfig.json, add @ember-intl/vite/virtual to compilerOptions.types.

{
  "compilerOptions": {
    "types": [
      "ember-source/types",
      "@embroider/core/virtual",
      "@glint/ember-tsc/types",
-       "vite/client"
+       "vite/client",
+       "@ember-intl/vite/virtual"
    ]
  }
}

4. Use import to load translations.

/* app/routes/application.ts */
import Route from '@ember/routing/route';
import { type Registry as Services, service } from '@ember/service';
+ import translationsForDeDe from 'virtual:ember-intl/translations/de-de';
+ import translationsForEnUs from 'virtual:ember-intl/translations/en-us';

export default class ApplicationRoute extends Route {
  @service declare intl: Services['intl'];

  beforeModel(): void {
    this.setupIntl();
  }

  private setupIntl(): void {
+     this.intl.addTranslations('de-de', translationsForDeDe);
+     this.intl.addTranslations('en-us', translationsForEnUs);
+
    this.intl.setLocale(['en-us']);
  }
}

You can also load translations for all rendering and unit tests.

/* tests/helpers/index.ts */
import {
  setupApplicationTest as upstreamSetupApplicationTest,
  setupRenderingTest as upstreamSetupRenderingTest,
  setupTest as upstreamSetupTest,
  type SetupTestOptions,
} from 'ember-qunit';
+ import translationsForDeDe from 'virtual:ember-intl/translations/de-de';
+ import translationsForEnUs from 'virtual:ember-intl/translations/en-us';

function setupRenderingTest(hooks: NestedHooks, options?: SetupTestOptions) {
  upstreamSetupRenderingTest(hooks, options);

  // Additional setup for rendering tests can be done here.
+   hooks.beforeEach(function () {
+     const intl = this.owner.lookup('service:intl');
+ 
+     intl.addTranslations('de-de', translationsForDeDe);
+     intl.addTranslations('en-us', translationsForEnUs);
+   });
}

export { setupApplicationTest, setupRenderingTest, setupTest };

Optional: Create a configuration file.

Compatibility

• ember-intl v8.0.0 or above
• Node.js v20 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.