Logo
FacebookFacebook
TRANSLE
Key "hero.slogan" missing in vi, en, fr languages.
npm i transle
🧩 Interpolation
Key: test.interpolation
Output: Key "test.interpolation" missing in vi, en, fr languages.
t("test.interpolation", { name: "Hoàng Nam", count: 3 })
⚠️ Typo in variable name
Key: test.var_typo
Output: Key "test.var_typo" missing in vi, en, fr languages.
t("test.var_typo", { nam: "123" })
🚨 Missing key
Key: test.not_exist
Output: Key "test.not_exist" missing in vi, en, fr languages.
t("test.not_exist")
🔢 Plural (1)
Key: test.plural
Output: Key "test.plural" missing in vi, en, fr languages.
t("test.plural", { count: 1 })
🔢 Plural (5)
Key: test.plural
Output: Key "test.plural" missing in vi, en, fr languages.
t("test.plural", { count: 5 })
🗂️ Nested Object Key
Key: test.nested.welcome_back
Output: Key "test.nested.welcome_back" missing in vi, en, fr languages.
t("test.nested.welcome_back", { user: { name: "Nam" } })
🧮 Format function
Key: test.interpolation
Output: Key "test.interpolation" missing in vi, en, fr languages.
t("test.interpolation", { name: "nam", count: 1234 }, {
  format: (key, value) => {
    if (key === "name") return value.toUpperCase();
    if (key === "count") return value.toLocaleString("en-US");
    return value;
  }
})
1. Key "guide.step1" missing in vi, en, fr languages.
{5 items
"header":{1 item
"welcome":string"Rất vui được gặp bạn"
}
"hero":{1 item
"slogan":string"Dịch, chèn biến và vươn ra toà..."
}
"guide":{3 items
"step1":string"Tạo thư mục 'locales' bên tron..."
"step2":string"Khởi tạo i18n một cách đồng bộ..."
"step3":string"Thoải mái sử dụng trong dự án ..."
}
"footer":{1 item
"intro":string"Xin chào, tôi là Hoàng Nam — đ..."
}
"test":{5 items
"interpolation":string"Xin chào {name}, bạn có {count..."
"var_typo":string"Xin chao {name}"
"missing_key":string"Khóa này không tồn tại trong n..."
"plural":string"{count, plural, one {1 tệp} ot..."
"nested":{1 item
"welcome_back":string"Chào mừng trở lại, {user.name}..."
}
}
}
2. Key "guide.step2" missing in vi, en, fr languages.
Demo code
As you can see, this is flatten translations progress to make it easier to use
{}0 items
3. Key "guide.step3" missing in vi, en, fr languages. 😍
import {useT, useI18nStore} from "transle"
useI18nStore
lang: string
setLang: (lang: string) => void
getLangs: () => string[]
translations
flattenTranslations
useT
const t = useT()
<div>{t("header.welcome")}</div>
Key "footer.intro" missing in vi, en, fr languages.