soon-i18n-vue

install

npm install soon-i18n-vue

full example

soon-admin-vue
or

npx degit https://github.com/leafio/soon-i18n/packages/soon-i18n-vue/demo

instance usage

create an instance

import { createI18n } from "soon-i18n-vue";
const en_global = {
  welcome: "Welcome {name}",
}
const zh_global = {
  welcome: "欢迎 {name}",
}

const global_locales = {
  zh: zh_global,
  en: en_global,
};
export const { tLocales, lang } = createI18n(
  { lang: "zh", fallbacks: ["en"] },
  global_locales
);

use in js/ts

import { tLocales } from "../lang";
export const showToast = () => {
  const t = tLocales({
    zh: { tip: "哈哈，一条中文提醒！！！" },
    en: { tip: "Aha, an English tip" },
  });
  alert(t("tip"));
};

use in components

<template>
  <div>{{ t("hello") }}</div>
</template>

<script setup>
import { tLocales } from "../lang";
const t = tLocales({
  zh: { hello: "你好" },
  en: { hello: "Hello" },
});
</script>

change lang

<template>
  <button @click="handleToggle">{{ lang }}</button>
</template>

<script setup>
import { lang } from "../lang";
const t = tLocales({
  zh: { hello: "你好" },
  en: { hello: "Hello" },
});
const handleToggle = () => {
  lang.value = lang.value === "zh" ? "en" : "zh";
};
</script>