English|中文|Demos|示例

grig

a lightweight and easy-to-use i18n library, with TS smart prompts. Can be used in react、vue3、svelte、solid ...

• Use as a formatter

• Vue3

• General Instance Usage

• Demos

• Installation

Use as a formatter

import { grig } from "grig";
const message = {
  name: "姓名",
  form: { status: "状态" },
  welcome: "欢迎来到{city}！",
  own: (count: number) => `我有${count}个苹果`,
} as const;
const t = grig(message);
console.log(t("name")); // 姓名
console.log(t("form.status")); // 状态
console.log(t("welcome", { city: "上海" })); // 欢迎来到上海！
console.log(t("own", 2)); //我有2个苹果

Vue3

Demos

npx degit https://github.com/leafio/grig/examples grig-examples

Installation

npm install grig

English|中文|Demos|示例

grig

轻量易用的 i18n 库，含 TS 智能提示。 可在 react、vue3、svelte、solid 等多种框架内使用。

• 直接使用

• Vue3

• 通用用法

• 示例

• 安装

直接使用

import { grig } from "grig";
const message = {
  name: "姓名",
  form: { status: "状态" },
  welcome: "欢迎来到{city}！",
  own: (count: number) => `我有${count}个苹果`,
} as const;
const t = grig(message);
console.log(t("name")); // 姓名
console.log(t("form.status")); // 状态
console.log(t("welcome", { city: "上海" })); // 欢迎来到上海！
console.log(t("own", 2)); //我有2个苹果

Vue3

1.创建 grig 实例

//./lang/init
import { createGrigVue } from "grig/vue";
const zh_global = { g_welcome: "全局_欢迎" } as const;
const en_global = { g_welcome: "Global Welcome" } as const;
const global_messages = { zh: zh_global, en: en_global };
export const { tMessages, lang } = createGrigVue(
  { lang: "zh", fallbackLang: "en" },
  global_messages
);

2.在任意组件内使用

<template>
  <div className="content card">
    <div>child: Content.tsx</div>
    <span>{{ t("g_welcome") }}</span>
    <span>{{ t("world") }}</span>
  </div>
</template>
<script setup lang="ts">
import { tMessages } from "../lang/init";
const t = tMessages({
  zh: { world: "世界" },
  en: { world: "World" },
});
</script>

3.切换语言

<template>
  <div class="lang-switch card">
    <div>child: langSwitch.vue</div>
    <button @click="handleToggle">{{ t("lang") }} {{ lang }}</button>
  </div>
</template>
<script setup lang="ts">
import { lang, tMessages } from "../lang";

const handleToggle = () => {
  if (lang.value == "zh") {
    lang.value = "en";
  } else {
    lang.value = "zh";
  }
};
const t = tMessages({
  zh: {
    lang: "中文",
  },
  en: {
    lang: "English",
  },
});
</script>

示例

npx degit https://github.com/leafio/grig/examples grig-examples

安装

npm install grig