Loading...
Loading...
Implement internationalization (i18n) with Paraglide JS — a compiler-based i18n library that compiles translation files into tree-shakable JavaScript functions. Use when working with Paraglide JS, @inlang/paraglide-js, or any i18n task involving compiled message functions, locale strategies, i18n routing, or multilingual rendering. Covers setup, message compilation, locale detection strategies, URL-based i18n routing, SSR/SSG middleware, variants (pluralization/gendering), formatting, markup, and integration with any framework (React, Vue, Svelte, Solid, Next.js, SvelteKit, Astro, etc.).
npx skill4agent add fellipeutaka/leon paraglide-jsmessages/ ← Translation source files (JSON)
en.json
de.json
project.inlang/
settings.json ← Inlang project config (locales, plugins, sourceLanguageTag)
src/paraglide/ ← Compiler output (generated, gitignored)
messages.js ← Compiled message functions
runtime.js ← getLocale(), setLocale(), locales, sourceLocale
server.js ← paraglideMiddleware() for SSR./src/paraglide/import * as m from "./paraglide/messages.js";
// Simple message — no params
m.hello_world(); // "Hello World"
// Parameterized message
m.greeting({ name: "Alice" }); // "Hello, Alice!"// messages/en.json
{
"hello_world": "Hello World",
"greeting": "Hello, {name}!"
}import { getLocale, setLocale, locales, sourceLocale } from "./paraglide/runtime.js";
getLocale(); // Current locale, e.g. "en"
setLocale("de"); // Change locale (triggers re-render in frameworks)
locales; // ["en", "de", "fr"] — all configured locales
sourceLocale; // "en" — the source languagegetLocale()m.greeting({ name: "Alice" }, { locale: "de" }); // Force GermangetLocalegetLocalesetLocale// project.inlang/settings.json
{
"baseLocale": "en",
"locales": ["en", "de", "fr"],
"plugin": "https://cdn.jsdelivr.net/npm/@inlang/paraglide-js@2/dist/plugin.js",
"$imports": {
"default": "https://cdn.jsdelivr.net/npm/@anthropic-ai/sdk@latest/dist/index.js"
}
}compilerOptions.emitGitIgnorecompilerOptions.outputStructureparaglideMiddleware()import { defineCompilerOptions } from "@inlang/paraglide-js";
export default defineCompilerOptions({
strategy: ["url", "cookie", "preferredLanguage", "baseLocale"],
urlPatterns: [{ pattern: "/:locale(en|de|fr)/:path*" }],
cookieName: "NEXT_LOCALE",
});urlcookiepreferredLanguageglobalVariablelocalStoragebaseLocale// vite.config.ts
import { paraglideVitePlugin } from "@inlang/paraglide-js";
export default defineConfig({
plugins: [paraglideVitePlugin()],
});paraglideWebpackPlugin()paraglideRollupPlugin()paraglideRolldownPlugin()import { paraglideMiddleware } from "./paraglide/server.js";
app.use((req, res, next) => {
paraglideMiddleware(req, ({ request, locale }) => {
// locale is detected, getLocale() works in this scope
return next();
});
});