JavaScript-enabled Translation

Translations directly imported in JavaScript

Write & manage your translations like you always do. Then use them just as easily in JS. 

composer require symfony/ux-translator

Read the docs

translations/messages+intl-icu.en.yaml 
hello: 'Hello!'
say_hello: 'Hello {name}!'

# Select
invitation_title: >-
  {organizer_gender, select,
      female   {{organizer_name} has invited you to her party!}
      male     {{organizer_name} has invited you to his party!}
      multiple {{organizer_name} have invited you to their party!}
      other    {{organizer_name} has invited you to their party!}
  }

# Pluralization
num_of_apples: >-
  {apples, plural,
      =0    {There are no apples}
      =1    {There is one apple...}
      other {There are # apples!}
  }

# Ordinal
finish_place: >-
  You finished {place, selectordinal,
      one   {#st}
      two   {#nd}
      few   {#rd}
      other {#th}
  }!

# Date and Time
published_at: 'Published at {publication_date, date} - {publication_date, time, short}'

# Numbers
progress: '{progress, number, percent} of the work is done'
value_of_object: 'This artifact is worth {value, number, ::currency/EUR}'
translations/messages+intl-icu.fr.yaml 
hello: 'Bonjour !'
say_hello: 'Bonjour {name} !'

# Select
invitation_title: >-
  {organizer_gender, select,
      female   {{organizer_name} t'a invité à sa fête !}
      male     {{organizer_name} t'a invité à sa fête !}
      multiple {{organizer_name} t'a invité à sa fête !}
      other    {{organizer_name} t'a invité à sa fête !}
  }

# Pluralization
num_of_apples: >-
  {apples, plural,
      =0    {Il n'y a pas de pommes}
      =1    {Il y a une pomme...}
      other {Il y a # pommes !}
  }

# Ordinal
finish_place: >-
  Tu as terminé {place, selectordinal,
      one   {#er}
      other {#e}
  } !

# Date and Time
published_at: 'Publié le {publication_date, date} - {publication_date, time, short}'

# Numbers
progress: '{progress, number, percent} du travail est fait'
value_of_object: "Cet artéfact vaut {value, number, ::currency/EUR}"
Symfony logo

UX Translator

import { trans, HELLO } from '../translator';

trans(HELLO)
🇬🇧
🇫🇷 
import { trans, SAY_HELLO } from '../translator';

trans(SAY_HELLO, {
     name: 'Fabien',
}})
🇬🇧
🇫🇷 
import { trans, INVITATION_TITLE } from '../translator';

trans(INVITATION_TITLE, {
     organizer_gender: 'Fabien',
     organizer_name: 'Clara',
}})
🇬🇧
🇫🇷 
import { trans, NUM_OF_APPLES } from '../translator';

trans(NUM_OF_APPLES, {
     apples: 2,
}})
🇬🇧
🇫🇷 
import { trans, FINISH_PLACE } from '../translator';

trans(FINISH_PLACE, {
     place: 2,
}})
🇬🇧
🇫🇷 
import { trans, PUBLISHED_AT } from '../translator';

trans(PUBLISHED_AT, {
     publication_date: new Date('2023-04-27 08:12'),
}})
🇬🇧
🇫🇷 
import { trans, PROGRESS } from '../translator';

trans(PROGRESS, {
     progress: 42,
}})
🇬🇧
🇫🇷 
import { trans, VALUE_OF_OBJECT } from '../translator';

trans(VALUE_OF_OBJECT, {
     value: 30,
}})
🇬🇧
🇫🇷

Install It

$ composer require symfony/ux-translator