I18n #

// in main.{js,ts} file
import { createApp } from "vue";
import App from "./App.vue";
import type { IConfig } from "@agufaui/vue";
import { Config, zhCn, Theme, CConfigProvideName } from "@agufaui/vue";

const app = createApp(App);

app.provide<IConfig>(
	CConfigProvideName,
	new Config({
		locale: "zh-cn",
		locales: [zhCn],
		baseTheme: Theme,
		theme: {
      ...
		},
	})
);

...

// in main.{js,ts} file
import { configStore } from "@agufaui/svelte";
import { Config } from "@agufaui/config";
import { Theme } from "@agufaui/theme";
import { zhCn } from "@agufaui/locale";

configStore.set(
	new Config({
		locale: "zh-cn",
		locales: [zhCn],
		baseTheme: Theme,
    theme: { ... }
	})
);

...

// in main.{js,ts} file
import { createApp, ref } from "vue";
import App from "./App.vue";
import type { IConfig } from "@agufaui/vue";
import { Config, en, zhCn, Theme, CConfigProvideName } from "@agufaui/vue";

const app = createApp(App);

app.provide<IConfig>(
	CConfigProvideName,
	new Config({
		locale: ref<string>("en"),
		locales: [en, zhCn],
		baseTheme: Theme,
		theme: {
      ...
		},
	})
);

...

// in .vue file that toggles languages
<script setup lang="ts">
import { isRef, inject } from "vue";
import type { IConfig } from "@agufaui/vue";
import { CConfigProvideName } from "@agufaui/vue";

const config = inject<IConfig>(CConfigProvideName);

const click = () => {
	const locale = config?.locale;
	if (isRef(locale)) {
		if (locale.value === "en") {
			locale.value = "zh-cn";
		} else {
			locale.value = "en";
		}
	}
};
</script>

// in main.{js,ts} file
import { configStore } from "@agufaui/svelte";
import { Config } from "@agufaui/config";
import { Theme } from "@agufaui/theme";
import { en, zhCn } from "@agufaui/locale";
import { writable } from "svelte/store";

configStore.set(
	new Config({
		locale: writable<string>("en"),
		locales: [en, zhCn],
		baseTheme: Theme,
    theme: { ... }
	})
);

...

// in .svelte file that toggles languages
<script lang="ts">
import type { Writable } from "svelte/store";
import { get } from "svelte/store";
import { configStore } from "@agufaui/svelte";

const click = () => {
  const locale = $configStore.locale as Writable<string>;
  if (get(locale) === "en") {
    locale.set("zh-cn");
  } else {
    locale.set("en");
  }
  // this line is important
  configStore.set($configStore);
};
</script>