Nowadays most web applications include some components that are built with Javascript frameworks like Vue, React or Angular. Combining a Pimcore backend with a responsive frontend with some Javascript components is a pretty powerful and scalable architecture, that I am using for most of my client projects. Why ? The answer is pretty simple — it’s awesome! Pimcore as a “data-management” platform, a REST API built with Symfony (Pimcore is powered by Symfony 3.4) and a frontend “on-steroids” with some Vue components.

Pimcore has this awesome feature called “Shared Translations”. It’s more or less an extension of the Symfony Translator, but instead of storing the translations on the filesystem, the translations are stored in the SQL database.

This solution is made for frontend-to-backend-coupled applications. That means that certain components in the frontend are built with Vue and not the complete frontend is built as an single-page-application.

TL;DR; We are reading the translations from the database, format them, push them into the JavaScript window object an then use the translations from the window object in the Vue i18n plugin configuration.

Preparations

To transfer the translations from the database to the Javascript window object I am using an helper class called TranslationsDumper . This class collects all translations from the database and returns them as a recursive array ordered by the available languages.

The helper class to dump the translations

Register this class now as a service in your services.yml file and add it to your Twig globals in your config.yml .

Now we need to dump the translations in a way that they become globally available for JavaScript components. I am doing that via the window object.

Important: This script tag needs to be placed before the script tag that includes your compiled Vue components. Also I am using the deferred twig extension to defer the rendering this block. Read more here. https://github.com/rybakit/twig-deferred-extension

Whats our status quo now:

We can read all our translations from the database

We format the translation data in a way we can use it in further steps

We only print the translations from languages that are enabled in the Pimcore backend

All translations are available globally in our JavaScript window object.

Let’s print those translations!

First things first — make sure you have installed i18n. If not, do it now → https://github.com/kazupon/vue-i18n

As a next step we need to make the translations available in the Vue components.

Advantages