Directus Localization

The Directus localization plugin by Localazy allows you to synchronize your content with Localazy and translate it with available tools. You can manage your language versions separately in Localazy and import new content for translation as you add it seamlessly without manual copypasting or file importing.

The plugin can be installed via NPM. Run npm i @localazy/directus-extension-localazy in the root of your project.

Once installed, navigate to Settings -> Project Settings -> Modules and enable the Localazy module.

Remember to sign up for Localazy and activate the Autopilot plan.

Learn more about the Directus localization plugin in the docs.

Before you start localizing your Directus project, you need to use the correct version and prepare your instance to support translated content.

1. Ensure you run the project on Directus v10.10.0 or above.
2. Ensure that your Directus instance is prepared for localization. You must have a languages collection and use the translations field type for translatable content.

You can read more in the Directus content translations guide in the official docs.

Yes, you can automate the export process by installing the Localazy Automation extension.

After installation, check the Deletion options in the Additional Setup section of the Localazy plugin to ensure that the “Automated Upload to Localazy” and “Automated Deprecation of Localazy Source Keys” options are enabled. This setup will allow automatic content updates, reducing the need for manual intervention.

To set up Directus for a multilingual site, follow these steps:

Installation and Configuration: #️⃣

• Ensure that you have Directus installed and properly configured in your project.

Collection Setup: #️⃣

• Create a new collection or modify an existing one to support translations.
• Decide which collections need multilingual support (e.g., articles, products, pages).
• Add a language field to your collection. This field will store the language code (e.g., “en” for English, “fr” for French).

Language Field Configuration: #️⃣

• Customize the language field to match your project’s requirements.
• Consider adding additional fields for language-specific content (e.g., “title_en” for English titles, “description_fr” for French descriptions).

Fetching Content: #️⃣

• Use the Directus API to fetch content in the desired language based on user preferences. When a user selects a language, retrieve the relevant content from the collection.

Content Translations Guide: #️⃣

• For more detailed instructions and best practices, explore the Directus Content Translations Guide.

To synchronize translated languages between Localazy and Directus, you have several options that you can find in the Additional Settings of the plugin:

Create Non-Hidden Missing Languages in Directus: #️⃣

• Only creates languages in Directus that exist in Localazy and are not hidden.
• This option ensures that only visible languages are synchronized.

Create All Missing Languages in Directus (Including Hidden Ones): #️⃣

• Creates all languages that are missing in Directus, including those hidden in Localazy.
• Use this option if you want to synchronize all languages, regardless of visibility.

Don’t Create Missing Languages in Directus: #️⃣

• Missing languages are not synchronized automatically.
• If you need to support such languages in your Directus project, manually add them to the languages collection.

When dealing with content variations across languages, consider the following:

• Use localized fields to store language-specific content (e.g., “title_en” for English title, “title_fr” for French title).
• Implement fallbacks to display default content if a translation is missing.
• Regularly update translations as your content evolves.
• For advanced scenarios, explore custom hooks or middleware.

Learn more from the Directus Content Translations Guide.