Prevent vue-i18n special characters causing error

[azrikahar]

Fixes #11056

Context

Ref #11056 (comment). There are several special characters in vue-i18n that will cause error when users add them in field/collection translations.

For example, if a user types title@here as the field translation, the @ will be interpreted as linked message. But since the format is malformed (it should be @:key where key is an existing translation key), it errors out.

The offending line is here inside parseField function:

directus/app/src/stores/fields.ts

Line 90 in 3a905b1

name = i18n.global.t(`fields.${field.collection}.${field.field}`);

This will only throw console errors during dev, but it ends up throwing an error in production environment and prevent any logged in user in that particular locale from doing anything.

Solution

Apply the recommended literal interpolations on all the special characters when they are parsed.

Result