aymericzip/intlayer-skills/intlayer-svelte

Intlayer 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:

1. Declaration: A content file (e.g., myComponent.content.ts) defining the dictionary.
2. Implementation: A Svelte component (e.g., MyComponent.svelte) using the useIntlayer store.

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

• SvelteKit
• Vite and Svelte

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>

Compiler

The Intlayer Compiler can extract all your content keys from your components, using one CLI command (npx intlayer extract) or automatically at app build.

It activates once compiler.enabled and compiler.output are set: .svelte files additionally require @intlayer/svelte-compiler.

References

• Website
• Doc

Environments

• Vite and Svelte
• SvelteKit
• Astro and Svelte

Concepts

• Variants
• Collections
• Compiler
• Formatters (number, currency, date, …)

Packages

• Intlayer Exports
• Svelte Intlayer Exports
• svelte-intlayer usePathname
• svelte-intlayer useRewriteURL