LiveSvelteGettext.Components (LiveSvelteGettext v0.2.0)

View Source

Phoenix components for LiveSvelteGettext.

This module provides reusable components for injecting Svelte translations into your Phoenix templates.

Usage

Import this module in your component helpers or directly in templates:

import LiveSvelteGettext.Components

Then use the svelte_translations component to inject translations:

<.svelte_translations />

Configuration

By default, the component reads the Gettext module from application config:

# config/config.exs
config :live_svelte_gettext,
  gettext: MyAppWeb.Gettext

This is automatically configured when you run:

mix igniter.install live_svelte_gettext

You can also pass the Gettext module explicitly:

<.svelte_translations gettext_module={MyAppWeb.Gettext} />

Examples

# Basic usage (uses config)
<.svelte_translations />

# With explicit locale
<.svelte_translations locale="fr" />

# With explicit Gettext module (for multi-tenant apps)
<.svelte_translations gettext_module={TenantA.Gettext} />

# Custom script tag ID
<.svelte_translations id="my-translations" />

Summary

Functions

svelte_translations(assigns)

Injects Svelte translations into the page and sets up auto-initialization.

Functions

svelte_translations(assigns)

Injects Svelte translations into the page and sets up auto-initialization.

This component must be placed in your template before any LiveSvelte components that need translations. It's recommended to place it in your root layout or at the top of LiveView templates that use Svelte components.

Attributes

  • :gettext_module - The Gettext module to use. Defaults to the module configured in :live_svelte_gettext, :gettext application config.

  • :locale - Explicit locale override. Defaults to the current locale from Gettext.get_locale/1.

  • :id - HTML id attribute for the script tag. Defaults to "svelte-translations".

How It Works

  1. Fetches all translations from the configured Gettext module's SvelteStrings submodule (which is generated at compile time)
  2. Encodes them as JSON and injects a <script type="application/json"> tag
  3. Translations are automatically initialized on first use (lazy initialization)

Zero Setup Required

No hook registration or manual initialization needed! Translations automatically initialize when you first call gettext() or ngettext() in your Svelte components.

Examples

# Minimal usage - uses application config for Gettext module
<.svelte_translations />

# Override locale (useful for previewing translations)
<.svelte_translations locale="es" />

# Multi-tenant app with different Gettext modules
<.svelte_translations gettext_module={@current_tenant.gettext_module} />

# Custom script tag ID (if you have multiple translation sets)
<.svelte_translations id="admin-translations" />

Placement

Place this component before your Svelte components:

<.svelte_translations />

<.svelte name="MyComponent" props={%{...}} />

Or in your app layout for site-wide availability:

# lib/my_app_web/components/layouts/app.html.heex
<.svelte_translations />
{@inner_content}

Prefer the app layout over root.html.heex. The root layout is only produced by the initial dead render, so LiveView never patches it - which means a locale change during live navigation would not reach the browser. Rendered anywhere inside the LiveView tree, the JavaScript client notices the updated script tag and reloads translations automatically.

Attributes

  • gettext_module (:atom) - Gettext module (defaults to :live_svelte_gettext :gettext config). Defaults to nil.
  • locale (:string) - Locale override (defaults to current locale). Defaults to nil.
  • id (:string) - HTML id attribute for the script tag. Defaults to "svelte-translations".