All default UI labels in Olobase Admin must be localized correctly. Plus, thanks to Vue I18n, you can use your own custom locales on any custom page. But what about the name of the resources and all the resource attribute tags? It can be tedious to use the $t function from Vue I18n all over CRUD pages, settings labels to all components.
To minimize this code, Olobase Admin will try to guess the target translation key from the source or source name by following a simple naming convention. Olobase Admin, selection, radio button etc. It even supports localized enumerations that can be used for any selection-based field or input components, such as. Any localized resource specific tags need to be added to your own i18n json locale, which is src/locales/{locale}.json by default, under the main resources key. Each translation key under Resources must match the valid resource names set in the src/resources/index.js file.
You can then put the following keys in your language settings:
| Key | Description |
|---|---|
| name | The name of resource with singular and plural format, notably used on every page titles and some context messages. |
| titles | Localized titles for every CRUD actions. Valid child keys are list, show, create or edit. |
| fields | Localized labels for each resource property. |
| enums | Localized enums for resource property, each enum is an array of key-value pair, where the key must correspond to a valid value of targeted property. |
Here is the naming translation keys format you must follow for each type of weld tag:
| Key | I18n key path format | Example for users module |
|---|---|---|
| name | resources.{resource}.name |
resources.users.name |
| titles | resources.{resource}.titles |
resources.users.titles |
| fields | resources.{resource}.fields.{source} |
resources.users.fields.name |
| enums | resources.{resource}.enums.{source}.{value} |
resources.users.enums.roles |
Here's an example of a users module and en locale:
src/locales/en.json
{
//...
"resources": {
"users": {
"name": "User | Users",
"titles": {
"list": "List all users",
"show": "Details of user {name}",
"create": "Create new user",
"edit": "Edit user {name}"
},
"fields": {
"id": "ID",
"name": "Name",
"email": "Email",
"password": "Password",
"password_confirmation": "Password Confirmation",
"active": "Active",
"roles": "Roles",
"createdAt": "Creation Date",
"updatedAt": "Modification Date"
},
"enums": {
"roles": {
"admin": "Admin",
"editor": "Editor",
"author": "Author"
}
}
}
}
}Your resource name must have both singular and plural forms separated by a dash. Olobase Admin will choose the correct format based on the context.
You should always use this method even if you have no intention of supporting multiple locales.
To have functional localized options for select or radio components, your enumeration key must be named the same as the source support for that component.