Setup

Install

npm install @yozora-tech/qfluent
# deno add jsr:@yozora-tech/qfluent

File System

Create Qwik v2 project,

npm create qwik@2.0.0-beta
# deno run -Ar npm:create-qwik@2.0.0-beta

create the following files, if not yet exist.

src
- i18n
  - en.ftl
- routes
  - index.tsx
- i18n.ts
- root.tsx

Write translations in src/i18n/*.ftl.

i18n.ts

Manifest localization metadata in src/i18n.ts, add the following content:

import type { QwikFluentResource } from "@yozora-tech/qfluent";

/**
 * Import ftl files with ?url.
 * See also: https://vite.dev/guide/assets#explicit-url-imports
 */
import ar_ftl from "./i18n/ar.ftl?url";
import en_ftl from "./i18n/en.ftl?url";
import ja_ftl from "./i18n/ja.ftl?url";
import zh_CN_ftl from "./i18n/zh-CN.ftl?url";

/**
 * A language may correspond to multiple locales: English (en-US, en).
 * A language may have multiple ftl files.
 */
export const i18nResources: QwikFluentResource[] = [
  {
    name: "العربية",
    locales: ["ar"],
    resources: [ar_ftl],
    dir: "rtl",
  },
  {
    name: "English",
    locales: ["en-US", "en"],
    resources: [en_ftl],
  },
  {
    name: "日本語",
    locales: ["ja"],
    resources: [ja_ftl],
  },
  {
    name: "中文（简体）",
    locales: ["zh-CN", "zh"],
    resources: [zh_CN_ftl],
  },
];

root.tsx

Modify the <body> JSX.

import { FluentProvider } from "@yozora-tech/qfluent";
import { i18nResources } from "./i18n";

<body>
  <FluentProvider origin={new URL("..", import.meta.url)} resources={i18nResources}>
    <RouterOutlet />
  </FluentProvider>
</body>

URL origin is mandatory to let Vite know where to import ftl files, in all scenarios (dev, prod, ssr, non-ssr).

See also:

Next Steps

Now qfluent environment is all set. Continue to Usage.