As a developer interested in content management, I love working with tools that make the whole process less stressful and more efficient. Directus is one of those open-source, headless CMS platforms that feels flexible enough for both developers and non-technical teammates, such as marketers, founders, or product managers, so it's one of my first options when such a need arises.
A major feature of content scalability points to being able to properly localize our content so it can be easily accessible for a global audience. There are multiple native translation tools and in-built Directus plugins and extensions that can handle translations for us; however, getting a solution that could easily integrate with the CMS and also handle automating translations could be a hassle.
When I found out that the Localazy plugin for Directus promised both, I knew I had to test it. In this hands-on guide, I’ll take you through a detailed walkthrough on how I set up my content in the CMS and connected my project to Localazy to handle translations directly in Directus using the plugin.
Spoiler: It was surprisingly easy. 😃 Let's get into it.
If this is your first time setting up localization in your content, you can rest assured that the process of using the Localazy plugin is quite straightforward. All you need to do is just follow through this guide as it breaks down and explains each step in detail. You can also follow the official Localazy documentation.
📋 Prerequisites 🔗
Before diving in, let’s get Directus up and running. Personally, I prefer using Docker because it saves me from environment-specific setbacks beforehand.
Make sure Docker is installed and the daemon is running.
- Inside a new project folder, run:
Docker run -p 8055:8055 -e SECRET=secret directus/directus
This snippet sets up a Directus container mapped to port 8055. The SECRET=secret is an environment variable we pass into the container, and directus/directus pulls the official Directus image from Docker Hub. The CLI will print out a default admin email and password.
2. You can now log into the dashboard at http://0.0.0.0:8055/ with the default login details provided above.
🛠️ Configuring a data model 🔗
For this project, I want to store articles and make them translatable.
To achieve that, I created two collections:
Languages collection 🔗
This model stores the languages we need our project to support. We create a new collection called languages, with a primary key field of code, and choose the type to be a manually entered string:
We need the code field (already created), a name field with an input type, and a direction field with a dropdown type. The default value can be set to ltr. Click on the button to add choices, which will open a new modal that allows us to save the options of rtl(right to left) and ltr (left to right), as seen in the screenshot below.
The languages collection should look like this after creation:
Articles collection 🔗
This model stores the content I’ll be translating. We'll create a new collection called articles:
Then, we will add a new field called translations. Select the language indicator field to be code, and then input the default language to be en.
When I added a translation field, Directus auto-generated a new model called articles_translations:
Click on articles_translations and add two extra fields: title as an input type and content as a markdown type.
At this point, we have our collections of languages, articles, and their translations, which are the backbone structure for our project.
📨 Adding content 🔗
The next step is to add our content using collections. Navigate to the content bar and select the Languages model to add new items with the code, name, and direction structure. We will add English (en), which is our source language, and German (de), which will be our target.
We will also populate content for the article collection:
⚡️ Installing the plugin 🔗
This is where the magic happens. We now install the Localazy plugin extension via the Directus marketplace:
You can click on Localazy to get more information about this plugin, installation options (which are either manual or via the marketplace), compatibility status, and its current version, among other things.
Click on the Install Extension button at the top right side and refresh afterwards to see the changes applied.
Once installed, navigate to Settings -> Project Settings -> Modules and enable the Localazy module so it's directly included as a sidebar on your Directus dashboard.
If you navigate to the Localazy sidebar, we can see that the project setup page needs to be completed:
Select the source language as en and click on the button to Login to Localazy. This will redirect you to a page that requests authorization for the Directus plugin to access your Localazy account.
If this is your first time using Localazy, you'll need to register and create a new account
At this stage, you can create a new project or select any of your previous Localazy projects, as shown below.
You can now return to Directus and confirm both systems are connected:
Click on the Import & Export tab and select all the fields that you want to export. In our instance, we will select both the title and the content fields.
Then click on the Export to Localazy button to export your content to Localazy. Navigate to the dashboard now and select the Directus Project- Culture project, where you'll see the successfully imported content:
Now it's time to add our target language, German (de), and translate.
Although there are various translation options available on Localazy, I'll use the Localazy machine translation feature to translate all keys in our imported content because of the multiple translation suggestions and because it allows for faster translation without switching between tools.
After translation, navigate to Directus and click on the Import to Directus button. Then, go back to the CMS and navigate to the Articles tab, where you'll find your translated content:
Congratulations! 🥳
We now have a working Directus and Localazy setup where article translation can be easily scaled to a global audience.
👀 Things to watch out for 🔗
During the process of integrating the plugin, I recommend being mindful of the following details:
Version compatibility 🔗
Make sure that the plugin version is compatible with the Directus version you're currently using. As of the time of publication, the Localazy plugin works best with Directus v10.10.0 or above.
Matching language code and name 🔗
When filling in the content for the languages, the language code and name used in your Directus project should match the code and name selected on the Localazy dashboard. For instance, if we add Spanish (es) as a new language in the CMS but use the code es_US in Localazy, this will cause some disparity while translating. As you can see below, even though we intended to translate to Spanish, the naming difference altered the process for us:
Source key limits 🔗
Localazy has a source key limit depending on the plan you are currently on. If you exceed it, keep in mind that you won't be able to import your source keys back to Directus (although you'll be allowed to export your content from Directus to Localazy). For a free trial, it has a considerably good limit, which should be enough for a small demo project like our article translation.
🤔 Pros & cons 🔗
- Very easy to setup
- Automated translation import/export
- Multiple MT options in one place
- Scales well for teams
- Requires matching codes/names precisely
- Dependent on Directus ≥ v10.10.0
- Source key limits on free tier
- Still need to pay for advanced use cases
🥁 The final verdict 🔗
Managing multilingual content is not an easy task, especially when you keep adding languages and scaling. However, since I discovered this plugin, content management has been a considerably easier and more efficient process for me. 🙌
What used to take hours of manual copying and pasting now happens automatically once you set it up. The extension honestly makes translations almost effortless: as you saw above, you can set up your content, push it to Localazy, and pull back translations without leaving your developer workflow.
From then on, if you are working with a large amount of content, you might want to upgrade to a subscription plan. Give it a go — it might be a good fit for your team and product needs.
