Svelte / SvelteKit
ShipEasyI18n integration for Svelte and SvelteKit — reactive i18n store, ShipEasyI18nString component, and server-side label loading via SvelteKit load().
Package: @i18n/svelte
Install
npm install @i18n/svelteScript tag
Add the loader to app.html before your bundle:
<!-- src/app.html -->
<head>
<script
src="https://cdn.i18n.shipeasy.ai/v1/loader.js"
data-key="i18n_pk_your_key_here"
data-profile="en:prod"
async
></script>
</head>i18n store
Import the reactive store anywhere in your Svelte components:
<script lang="ts">
import { i18n } from '@i18n/svelte';
</script>
<h1 data-label="user.greeting">
{$i18n.t('user.greeting')}
</h1>
{#if !$i18n.ready}
<p>Loading labels…</p>
{/if}The i18n store exposes { t, ready, locale }. Svelte's $ prefix makes it reactive automatically.
ShipEasyI18nString component
<script lang="ts">
import { ShipEasyI18nString } from '@i18n/svelte';
</script>
<nav>
<ShipEasyI18nString labelKey="nav.home" />
<ShipEasyI18nString labelKey="nav.signIn" />
</nav>SvelteKit SSR with load()
Use SvelteKit's load() function to fetch labels server-side and pass them as inline data:
// src/routes/+layout.server.ts
import { fetchLabels } from '@i18n/svelte/server';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ request }) => {
const labels = await fetchLabels({
i18nKey: process.env.ShipEasyI18n_KEY,
profile: 'en:prod',
chunk: 'index',
});
return { i18nData: labels };
};<!-- src/routes/+layout.svelte -->
<script lang="ts">
import { ShipEasyI18nProvider } from '@i18n/svelte';
export let data;
</script>
<ShipEasyI18nProvider initialData={data.i18nData}>
<slot />
</ShipEasyI18nProvider>Passing initialData eliminates the client-side fetch on first paint — labels are available immediately on hydration.
For the full implementation spec including package source code and edge cases, see plans/frameworks/svelte.md in the repository.
SolidJS
ShipEasyI18n integration for SolidJS — useShipEasyI18n() signal, ShipEasyI18nProvider context, and createStore integration for reactive label state.
Vue 3
ShipEasyI18n integration for Vue 3 apps — useShipEasyI18n() composable, ShipEasyI18nString component, and optional Pinia plugin for global label state.