Internationalization

Directus is a platform created and used by people all over the world. Not only does Directus allow you to easily author and manage multilingual content, the App itself can also be made available in any language.

Multilingual App

Directus supports internationalization across the entire suite. All collections, fields, settings, app text, and extensions can be offered in any number of languages.

Core App Translations

The app uses locale files for all text in the core codebase. One of the easiest and most helpful contributions you can make to Directus is adding support for another locale. Anyone can do it in a few simple steps:

Adding New Languages

  1. Duplicate the current English locale file
  2. Rename it to a new ISO language tag (eg: nl-NL.md)
  3. Translate the strings (everything in quotes) to the new language
  4. Send us the file as a Pull Request

If everything looks good we'll merge it in and mention you in the release notes!

Schema Translations

One of the key concpets of Directus is database mirroring. Since the Collections and Fields of Directus are custom to your project, we can't include those in our core translation files. Instead, we've created JSON translation options at the schema level. This allows admins to provide translations for the names within their database architecture using: directus_collections.translation and directus_fields.translation.

{
  "en-US": "My Collection",
  "nl-NL": "Mijn Collectie"
}

API Field Keys

Regardless of your Collection and Field translations, the API always uses the actual column name for keys in responses.

Extension Translations

Extensions can provide their own self-contained translations to extend those available within the core app. The meta.json file of each extension has a translation key that allows you to add new translations for use in the system.

"translation": {
  "en-US": {
    "color": "Color",
    "palette": "Palette",
    "palette_comment": "Add color options as hex values"
  },
  "nl-NL": {
    "color": "Kleur",
    "palette": "Palet",
    "palette_comment": "Voeg kleur keuzes toe als hex waardes"
  }
}

To avoid conflicts between packages, extension translations are namespaced as <ext-type>-<name>-<string>. To use the translations in the Color Interface example above, you would use $t('interfaces-color-palette_only').

You can even use the translations in the meta.json to translate values in that same meta.json key. So meta! This is especially useful to add translatable names for the extension and its options.

Rendering Translations

The core codebase uses the vue-i18n plugin to manage the translations across the platform. The language files and the init code are located in the /src/lang/ folder of the app repo. The plugin contains a bunch of methods to render these translations.

The one that is used most often is $t:

<p>{{ $t('collections') }}</p>

Multilingual API

Once you have your multilingual content in the database, you can then fetch it using the API's lang parameter.

Content Translations

Directus uses a translations interface to allow for managing content in as many languages as needed. Instead of simply creating new fields for each language, this interface stores translations relationally so your forms are not muddled with duplicate fields for each language. This also means that language-agnostic data such as dates or toggles can remain within the parent item.

Learn how to setup the Translations Interface

Custom Interfaces

Because the Directus interface system is modular and extensible you can easily create your own custom interfaces with the translation field type.