Browse recipes

Translate a view

Render one greeting from the active language dictionary.

Table of contents

APIs used

mount
Starts a Valyrian.js application on a DOM target.
setLang
Selects which dictionary `t` resolves.
setTranslations
Configures the application's translation dictionaries.
t
Resolves a translated message by path and replaces the provided parameters.

Run this recipe

Starting project
Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File
Replace src/client-entry.tsx with this recipe snippet.
Run
Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result
The mounted view displays Hola for the active language.

Starting point

Register the same greeting path in the default English dictionary and the additional Spanish dictionary.

Steps

Set both dictionaries, activate es and render the greeting resolved by t.

ts
import { mount } from "valyrian.js";
import { setLang, setTranslations, t } from "valyrian.js/translate";

setTranslations({ greeting: "Hello" }, { es: { greeting: "Hola" } });
setLang("es");

mount("body", () => t("greeting"));

Result

The mounted view displays Hola for the active language.

Continue