TL;DR: check the reference app
Add a config file:
// qloconfig.ts
export default {
locales: ["en", "es"],
defaultLocale: "en",
};Add the middleware to your root layout:
// layout.tsx
import { qloMiddleware } from "qlo";
import qloConfig from "~/qloconfig";
export const onGet: RequestHandler = async (ev) => {
// ...
return qloMiddleware(qloConfig)(ev);
};Set the lang attribute from opts.locale in your entry file:
// entry.ssr.tsx
// ...
export default function (opts: RenderToStreamOptions) {
return renderToStream(<Root />, {
manifest,
...opts,
// Use container attributes to set attributes on the html tag.
containerAttributes: {
lang: opts.locale + "",
...opts.containerAttributes,
},
});
}Add QLOProvider under QwikCityProvider and AlternateLinks under head to your root:
// root.tsx
import qloConfig from "./qloconfig";
import { AlternateLinks, QLOProvider } from "qlo";
export default component$(() => {
return (
<QwikCityProvider>
<QLOProvider config={qloConfig}>
<head>
<meta charSet="utf-8" />
<link rel="manifest" href="/manifest.json" />
<AlternateLinks />
<RouterHead />
<ServiceWorkerRegister />
</head>
<body>
<RouterOutlet />
</body>
</QLOProvider>
</QwikCityProvider>
);
});Place all your pages under src/routes/[locale] and create an empty file at src/routes/index.ts:
// src/routes/index.ts
// Will get redirected to the correct locale
// by QLO's middlewareFunction used to load translations within route loaders:
import { loadTranslation } from "qlo";
export const useThing = routeLoader$(async (ev) => {
const t = await loadTranslation(ev, {
en: () =>
Promise.resolve({
greeting: "Hello",
}),
es: () =>
Promise.resolve({
greeting: "Hola",
}),
});
console.log(t.greeting); // "Hello" or "Hola" depending on the locale
});Hook used to load translations within components:
import { component$, $ } from "@builder.io/qwik";
import { useTranslation } from "qlo";
export default component$(() => {
const t = useTranslation(
{
greeting: "", // Initial state
},
{
en: $(() => ({
greeting: "Hello",
})),
es: $(() => ({
greeting: "Hola",
})),
}
);
return <div>{t.greeting}</div>; // "Hello" or "Hola" depending on the locale
});Hook used to get the current locale:
import { component$ } from "@builder.io/qwik";
import { useLocale } from "qlo";
export default component$(() => {
const locale = useLocale();
return <div>{locale.value}</div>; // "en" or "es" depending on the locale
});Drop-in replacement for Qwik City's Link component that adds the current locale to the URL:
import { component$ } from "@builder.io/qwik";
import { Link } from "qlo";
export default component$(() => {
return <Link href="/page">Click me</Link>; // "/en/page" or "/es/page" depending on the locale
});Generates a link replacing the current locale with the one provided:
import { component$ } from "@builder.io/qwik";
import { LocaleLink } from "qlo";
export default component$(() => {
return <LocaleLink locale="es">Ver esta página en Español</LocaleLink>;
});