i18n - Leap UI

Vue enterprise @ Chargebee

Problem

• Locale text messages started to have complex structure.

 

• Composing the message structure inside a generic component sucks.

 

• UI Interactions needs to supported. (like displaying popover when hover over handles)

 

First Approach

Component Interpolation method

Output

Cons

• Doesn't scale for complex messages
• Difficult to debug issues
• Ending with lot of `if else` statements in the template

Pros

• Works well for simple message texts.

Second Approach

Writing custom tags and locale parser

Output

Pros

• Works well for simple and complex message texts.
• Code is easier to read and manage
• UI interactions logic are abstracted out from the message composing component

Cons

• Locale message now defines the structure of ui. Further modification needs to be done in all the supported languages