How to implement i18n

Question

I am trying to implement i18n, I have custom labels for that.

/CustomLabels.labels-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<CustomLabels xmlns="http://soap.sforce.com/2006/04/metadata">
    <labels>
        <fullName>translate</fullName>
        <language>en_US</language>
        <protected>true</protected>
        <shortDescription>desc.</shortDescription>
        <value>Translate</value>
    </labels>
</CustomLabels>

/en_US.translation-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<Translations xmlns="http://soap.sforce.com/2006/04/metadata">
    <customLabels>
        <label>Translate</label>
        <name>translate</name>
    </customLabels>
</Translations>

/pt_BR.translation-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<Translations xmlns="http://soap.sforce.com/2006/04/metadata">
    <customLabels>
        <label>Tradução</label>
        <name>translate</name>
    </customLabels>
</Translations>

I imported in the label in my LWC

export default class Community_delivery_create extends LightningElement {
    label = {
        TRANSLATE
    }
}

And I am rendering the label in my html file

<div>
    <p>Translated Text</p>
    <p>{label.TRANSLATE}</p>
</div>

Now I am trying to figure out how to use the correct label given the user language. I can access the language through the @salesforce/i18n/lang but how would I do use it in such a way?

Answer 1

There is clear documentation around how to use labels in LWC.

import transalte from '@salesforce/label/c.translate';

export default class Community_delivery_create extends LightningElement {
   // Expose the labels to use in the template.
   label = {
    transalte
   };
   
}

In your template use the below

<div>
<p>Translated Text</p>
<p>{label.translate}</p>

Salesforce will automatically take care of looking at the translation from the translation workbench and substituting the result.