Seamless localization management for your Svelte projects.
npm install @apploc/svelte
Initialize the project using AppLoc CLI:
npm install @apploc/cli --save-dev
npx apploc init --path "/src/routes/localization.json"
npx apploc update
You can read more about the CLI here.
Load localization.json in the /src/routes/+layout.svelte
:
<script>
import { loadLocalizations } from '@apploc/svelte';
import localizations from './localization.json';
// Load the localization data into the application
loadLocalizations(localizations);
</script>
<slot />
Use the LocalizedText component to display text in the current language:
<script>
import { LocalizedText } from '@apploc/svelte';
</script>
<div>
<h1>
<LocalizedText key="new_key" />
</h1>
</div>
You can use the setLocalization function to dynamically switch between languages. This allows users to choose their preferred language at runtime:
<script>
import { setLocalization, LocalizedText } from '@apploc/svelte';
</script>
<div>
<h1>
<LocalizedText key="new_key" />
</h1>
<br />
<button
on:click={() => {
setLocalization('EN'); // Switch to English
}}
>
<LocalizedText key="english" />
</button>
<button
on:click={() => {
setLocalization('UK'); // Switch to Ukrainian
}}
>
<LocalizedText key="ukrainian" />
</button>
</div>
This project is licensed under the Apache-2.0 license. See the LICENSE.md file for details.