Translations

Nova supports translations, making it easier for you or your non-English-speaking users to navigate and use the panel.

Adding new languages

Out of the box, Nova comes with translations for German, French, Italian, and Polish.

If you want to add your own translations, start by creating the resources/lang/{ln} folder. The {ln} part should be a two-character language code (ISO 639-1), for example resources/lang/pl or resources/lang/de.

Then you can simply start writing translations for your language! If you leave a key untranslated, it will fall back to English. You need to translate the following files and folders:

• All of the nova folder: This contains nearly all strings on the frontend.
• activity.php: This contains the descriptions for activity log events.
• exceptions.php: This contains friendly names for exceptions. You don't necessarily need to translate this, but it would help reduce confusion for users later on.

Strings with a count variable may need to be pluralized. For example, in Polish, a string such as:

return [
  'hello' => 'Hello! You have {{count}} servers.',
];

Might need 3 variants for different cases, for example:

return [
  'hello_one' => 'Dzień dobry! Masz {{count}} serwer.',
  'hello_few' => 'Dzień dobry! Masz {{count}} serwery.',
  'hello_many' => 'Dzień dobry! Masz {{count}} serwerów.',
];

You can refer to this JSFiddle to find out what suffixes your language supports.

Adding new translation keys

If you want to translate third-party extensions or custom code, you can add them to the translation system very easily.

First, start off by creating a namespace for them in the resources/lang/en folder. For the purposes of this guide, let's go with extensions/trash-bin.

The last part of the namespace must be a PHP file. We need to create a resources/lang/en/extensions folder, and inside of it, a trash-bin.php file with contents like so:

<?php

return [
  // keys will go here
];

You have created a new namespace! Now, let's add some strings to this file.

<?php

return [
  'trashFolder' => 'Trash',
  'actions' => [
    'emptyTrash' => 'Empty {{count}} items',
  ],
];

Now, here's how you can use this in your frontend code.

Import the useTranslation hook from react-i18next.

import { useTranslation } from "react-i18next";

Add it somewhere at the top of your component.

const MyComponent = () => {
  const { t } = useTranslation("extensions/trash-bin");
  // ...
};

Now, if you want to reference your keys in code, simply call the t function with the key and some values.

const MyComponent = () => {
  const { t } = useTranslation("extensions/trash-bin");
  // ...

  return (
    <>
      {/* ... */}
      <p>{t("trashFolder")}</p>
      <Button>{t("actions.emptyTrash", { count: 42 })}</Button>
      {/* ... */}
    </>
  );
};

For more advanced usage, refer to the react-i18next documentation.