intlayer-svelte
npx machina-cli add skill aymericzip/intlayer-skills/intlayer-svelte --openclawIntlayer Svelte Usage
Core Philosophy
Intlayer promotes Component-Level Content Declaration. Instead of a massive global translation file, content is declared in *.content.ts files adjacent to the Svelte components that use them.
Workflow
To create a translated component, you need two files:
- Declaration: A content file (e.g.,
myComponent.content.ts) defining the dictionary. - Implementation: A Svelte component (e.g.,
MyComponent.svelte) using theuseIntlayerstore.
1. Declare Content
Create a content file using t() for translations.
File: src/components/MyComponent/myComponent.content.ts
import { t, type Dictionary } from "intlayer";
const content = {
// The 'key' must be unique and matches what you pass to useIntlayer()
key: "my-component",
content: {
text: t({
en: "Welcome",
fr: "Bienvenue",
es: "Hola",
}),
},
} satisfies Dictionary;
export default content;
Setup
useIntlayer Hook
In Svelte, useIntlayer returns a store. You must use the $ prefix to access its value.
<script>
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("my-component");
</script>
<div>
<h1>
{/* Return content */}
{$content.text}
</h1>
{/* Return string (.value) */}
<div aria-label={$content.text.value}></div>
</div>
References
Source
git clone https://github.com/aymericzip/intlayer-skills/blob/main/skills/intlayer-svelte/SKILL.mdView on GitHub Overview
Intlayer Svelte integrates per-component translations by colocating content files with components and using a useIntlayer store to fetch localized strings. It replaces large global translation files with component-level dictionaries, making localization modular and maintainable for Svelte and SvelteKit apps.
How This Skill Works
Create a content file next to your Svelte component using t() to define translations for a unique key. In the Svelte component, call useIntlayer('your-key') to obtain a store and reference translated values with the $ prefix (e.g., {$content.text}). The store exposes per-language strings and can be read directly in markup or via .value when raw strings are needed.
When to Use It
- When you want per-component translations instead of a single global file
- When building Svelte or SvelteKit apps that require multiple locales
- When you want translations colocated with their components for maintainability
- When you prefer a reactive store-based approach to translations via useIntlayer
- When you need to reference translated strings directly in templates using the $store syntax
Quick Start
- Step 1: Create a content file next to your component, e.g., myComponent.content.ts, and define translations with t()
- Step 2: In your Svelte component, import useIntlayer and call const content = useIntlayer('my-component')
- Step 3: Use translated values in the markup with the $content store (e.g., {$content.text}) and test across locales
Best Practices
- Place a component.content.ts file adjacent to the Svelte component (same folder) and name the key consistently with the component
- Use a unique key in content files that matches the useIntlayer() call in the component
- Define translations with t({ en: '...', fr: '...', es: '...' }) to cover languages you support
- Access translations in markup with the $store syntax (e.g., {$content.text}) and use .value if you need the raw string
- Document and align setup steps for SvelteKit and Vite to ensure the environment supports Intlayer
Example Use Cases
- A localized Button component with myButton.content.ts providing the button label in multiple languages
- A ProductCard component that translates title, price label, and description via adjacent content file
- A NavigationMenu with per-locale item labels sourced from a shared content dictionary
- A FormField component translating placeholders and helper text using the content.ts approach
- An ErrorDialog that renders translated title and message strings based on the current locale
