By default Shopware 6 uses the Vue I18n plugin in the Administration to deal with translation.
Normally you want to use snippets in you custom module. To keep things organized, create a new directory named snippet inside your module directory <plugin root>/src/Resources/app/administration/src/module/<your-module>/snippet. For each language you want to support, you need a JSON file inside here, e.g. de-DE.json and of course en-GB.json.
Each language then receives a nested object of translations, so let's have a look at an example snippet/en-GB.json:
{
"swag-example": {
"nested": {
"value": "example"
},
"foo": "bar"
}
}In this example you would have access the two translations by the following paths: swag-example.nested.value to get the value 'example' and swag-example.foo to get the value 'bar'. You can nest those objects as much as you want.
By default, Shopware 6 will collect those files automatically when your plugin is activated.
{% hint style="info" %}
When you do not build a module and therefore do not fit into the suggested directory structure, you can still place the translation files anywhere in <plugin root>/src/Resources/app/administration/.
{% endhint %}
Since snippets are automatically registered in the scope of your module, you can use them directly:
Component.register('my-custom-page', {
...
methods: {
createdComponent() {
// call the $tc helper function provided by Vue I18n
const myCustomText = this.$tc('swag-example.general.myCustomText');
console.log(myCustomText);
}
}
...
});The same $tc helper function can be used in the templates to access translations.
{% raw %}
{% block my_custom_block %}
<p>
{{ $tc('swag-example.general.myCustomText') }}
</p>
{% endblock %}
{% endraw %}