Using translation from within extensions

Help
, ,
1

Hi,

Is there a way for UI components in my extension use directus translations, or every extension is on its own?

Cheers

1 Answer

1
2

Heya!

Extensions can use the existing Directus translations through the standard useI18n() composable from vue-i18n, which is included as a shared dependency for all app extensions:

import { useI18n } from 'vue-i18n';

const { t } = useI18n();
t('save'); // Uses existing Directus translation strings

For extension metadata like names and descriptions, you can reference existing translations using the $t: prefix:

export default defineInterface({
  id: 'my-interface',
  name: '$t:interfaces.my_interface.name',
});

There’s no built-in way for extensions to bundle and auto-register their own translation strings though. If you need custom keys, you (or your users) can add them through Settings > Translations in the Data Studio. Those get merged into the same i18n instance, so your extension can reference them with t() / $t: just the same.