Getting started

What is svelte-fluent?

svelte-fluent is a svelte component library that aims to make it effortless to localize applications using the Fluent localization system by Mozilla.

Example

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

	let { userName = 'Anna', userGender = 'female', photoCount = 3 } = $props();

	const translations = `
# Simple things are simple.
hello-user = Hello, {$userName}!

# Complex things are possible.
shared-photos =
    {$userName} {$photoCount ->
        [one] added a new photo
       *[other] added {$photoCount} new photos
    } to {$userGender ->
        [male] his stream
        [female] her stream
       *[other] their stream
    }.
`;
	const bundle = new FluentBundle('en');
	bundle.addResource(new FluentResource(translations));

	initFluentContext(() => createSvelteFluent([bundle]));
</script>

<strong><Localized id="hello-user" args={{ userName }} /></strong>
<p>
	<Localized id="shared-photos" args={{ userName, userGender, photoCount }} />
</p>

Installation

Using SvelteKit? Check out the SvelteKit integration guide!

Install svelte-fluent with your package manager of choice.

npm install --save-dev @nubolab-ffwd/svelte-fluent
npm install --save jsdom

| Note: the jsdom dependency is for the server-side rendering of the Overlay component. It will not increase your frontend bundle size.

Configure bundler

You need to add the svelte-fluent plugin to your bundler configuration for all features to work. Currently vite and rollup are supported.

The plugin serves 2 functions:

• It provides SSR support for the Overlay component.
• It allows you to import .ftl files via import resources from 'path/to/messages.ftl', directly providing you a FluentResource instance instead of having to constructing your own from a string imported via Vite’s ?raw syntax.

SvelteKit

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import svelteFluent from '@nubolab-ffwd/svelte-fluent/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [svelteFluent(), sveltekit()]
};

export default config;

Vite

vite.config.js

import svelteFluent from '@nubolab-ffwd/svelte-fluent/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [svelteFluent()]
};

export default config;

Rollup / Sapper

rollup.config.js

import svelteFluent from '@nubolab-ffwd/svelte-fluent/rollup';

export default {
	client: {
		plugins: [svelteFluent()]
	},
	server: {
		plugins: [svelteFluent({ ssr: true })]
	}
};