SvelteKit

Message Loading

This page explains how Message Loading is handled in a SvelteKit project.

Choosing a loading approach in SvelteKit:

When deploying to hosted platforms such as Vercel: Bundled
For more flexible scenarios: Local Loader , Remote Loader

Bundled

In the SvelteKit Quick Start, loading translation content by defining it directly in the config is already demonstrated.
This section introduces another bundled loading approach: Per-locale Loading (Dynamic Import) .

Per-locale Loading (Dynamic Import)

This section reuses the same translation content structure from the SvelteKit Quick Start .

To illustrate a different loading approach, the messages definition is temporarily removed from the config,
and routing.forceFullReload is enabled to ensure that the appropriate translation content is reloaded when switching locales.


intor-config.ts
M


import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  // messages: { en: EN, fr: FR },
  routing: { forceFullReload: true },
});

Next, create load-messages.ts under the i18n/ directory.


load-messages.ts
U

For the complete implementation, see: Loaded per locale (Dynamic Import)

Then, use this loader in +layout.server.ts to load translation content.

layout.tsx
M


import { intor } from "intor/server";
import { intorConfig } from "$lib/i18n/intor-config";
import { loadMessages } from "$lib/i18n/load-messages";

export const load = async ({ locals, fetch }) => {
  const intorValue = await intor(intorConfig, locals.intor.locale, { fetch });
  const messages = await loadMessages(intorConfig, locals.intor.locale);

  return {
    intorValue: { ...intorValue, messages },
  };
};

When using getTranslator() on the server side, the same dynamic loading strategy must also be specified.


const { t } = await getTranslator(intorConfig, {
  locale: locals.intor.locale,
  loader: loadMessages,
});

Local Loader

For details on the Local Loader, see: Local Loader

This section reuses the same translation content structure from the SvelteKit Quick Start .

Enable the Local Loader via the loader config.


intor-config.ts
M


import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  loader: { mode: "local" },
});

Remote Loader

For details on the Remote Loader, see: Remote Loader

This section reuses the same translation content structure from the SvelteKit Quick Start .

To simulate a remote service, copy the translation content into the static/ directory.


index.json
U
index.json
U

Enable the Remote Loader via the loader config.


intor-config.ts
M


import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  loader: { mode: "remote", url: "http://localhost:5173/messages" },
});