i18n

If the format is an object, the multilingual content is directly configured.

If the format is a string, the language file is dynamically loaded via fetch.

  • en.json
{
    "greeting": "Hello",
    "username": "Username"
}
  • index.html
<body id="app">
    <h1>{{ i18n.greeting }}, {{ i18n.username }}: {{ username }}</h1>
    <button @click="change" data-lang="zh">切換至中文</button>
    <button @click="change" data-lang="en">Switch to English</button>
</body>
<script>
const app = new QUI({
    id: "app",
    data: {
        username: "Pardn"
    },
    i18n: {
        zh: {
            greeting: "你好",
            username: "用戶名"
        },
        en: "en.json",
    },
    i18nLang: "zh | en", // Select the displayed language
    event: {
        change: e => {
            const _this = e.target;
            const lang = _this.dataset.lang;
            app.lang(lang);
        },
    }
});
</script>
  • result i18nLang = zh
<body id="app">
    <h1>你好, 用戶名: Pardn</h1>
    <button data-lang="zh">切換至中文</button>
    <button data-lang="en">Switch to English</button>
</body>
  • result i18nLang = en
<body id="app">
    <h1>Hello, Username: Pardn</h1>
    <button data-lang="zh">切換至中文</button>
    <button data-lang="en">Switch to English</button>
</body>
中文