FluentProvider (deprecated)

The FluentProvider component is deprecated in v1. Please review the Migration Guide for a replacement.

The FluentProvider component provides context for all other components and stores of svelte-fluent.

Typically there is only a single instance of FluentProvider wrapping the top level of the application (e.g. in a __layout.svelte file in SvelteKit or similar). For specialized needs it’s possible to nest multiple FluentProvider instances.

The mandatory bundles argument takes a list of FluentBundle instances. When resolving a translation each of the provided bundles will be tried in sequence until the translation message is found making it possible to split your translations across several files and use different bundle configurations (like attached functions) for each of them.

The FluentProvider component also emits error events whenever a translation message fails to parse or render.

Example

<script>
	import { FluentBundle, FluentResource } from '@fluent/bundle';
	import { FluentProvider, Localized } from '@nubolab-ffwd/svelte-fluent';

	const translations = 'hello = Hello, world!';
	const bundle = new FluentBundle('en');
	bundle.addResource(new FluentResource(translations));
</script>

<FluentProvider bundles={[bundle]} on:error={(msg) => console.warn(msg)}>
	<Localized id="hello" />
</FluentProvider>

Props

Slots

Events