Localized

The Localized component renders a translation message and outputs it as plain text. The output can be customized by overriding the default slot of the component.

Props

Name	Type	Default	Description
`id`	`string`	`undefined`	Unique identifier for the translation
`args`	`Record<string, FluentVariable>`	`undefined`	Arguments for interpolation

Snippets

Name	Type	Description
`children`	`Snippet<{ text: string; attrs: Record<string, string>; }>`	Replaces the text output of the translated message

Static text example

<script>
	import { Localized } from '@nubolab-ffwd/svelte-fluent';
</script>

<Localized id="hello" />

en.ftl

hello = Hello, world!

Result:

Hello, world!

Dynamic text with variables example

<script>
	import { Localized } from '@nubolab-ffwd/svelte-fluent';
	export let unreadEmails = 10;
</script>

<Localized id="emails" args={{ unreadEmails }} />

en.ftl

emails =
  { $unreadEmails ->
    [one] You have one unread email.
    *[other] You have { $unreadEmails } unread emails.
  }

Result:

You have ⁨10⁩ unread emails.

unreadEmails

Attributes example

<script>
	import { Localized } from '@nubolab-ffwd/svelte-fluent';
</script>

<Localized id="confirm">
	{#snippet children({ text, attrs })}
		<div>{text}</div>
		<div>
			<button onclick={() => alert('OK clicked')}>{attrs.ok}</button>
			<button onclick={() => alert('Cancel clicked')}>{attrs.cancel}</button>
		</div>
	{/snippet}
</Localized>

en.ftl

confirm = Please confirm the action.
  .ok     = Ok
  .cancel = Cancel

Result:

Please confirm the action.

Attributes with variables example

<script>
	import { Localized } from '@nubolab-ffwd/svelte-fluent';
</script>

<Localized id="confirm" args={{ count: 20 }}>
	{#snippet children({ text, attrs })}
		<div>{text}</div>
		<div>
			<button onclick={() => alert('OK clicked')}>{attrs.ok}</button>
			<button onclick={() => alert('Cancel clicked')}>{attrs.cancel}</button>
		</div>
	{/snippet}
</Localized>

en.ftl

confirm = Please confirm the action for { $count } items.
  .ok     = Yes, perform action for { $count } items
  .cancel = Cancel

Result:

Please confirm the action for ⁨20⁩ items.