A modern i18n library for JavaScript.

1$ npm install @comvi/core

1$ npm install @comvi/react

1$ npm install @comvi/vue

1$ npm install @comvi/svelte

1$ npm install @comvi/solid

1$ npm install @comvi/next

1$ npm install @comvi/nuxt

1import { createI18n } from "@comvi/core";
2import { icuCompiler } from "@comvi/core/icu";
3 
4const i18n = createI18n({
5  locale: "en",
6  compiler: icuCompiler,    // plural, select, selectordinal
7  messages: {
8    en: {
9      hello: "Hello, {name}!",
10      items: "{count, plural, one {# item} other {# items}}",
11    },
12    es: {
13      hello: "¡Hola, {name}!",
14      items: "{count, plural, one {# elemento} other {# elementos}}",
15    },
16  },
17});
18 
19await i18n.init();

1import { createRoot } from "react-dom/client";
2import { createI18n, icuCompiler, I18nProvider } from "@comvi/react";
3import App from "./App";
4 
5const i18n = createI18n({
6  locale: "en",
7  compiler: icuCompiler,    // plural, select, selectordinal
8  messages: {
9    en: {
10      hello: "Hello, {name}!",
11      items: "{count, plural, one {# item} other {# items}}",
12    },
13    es: {
14      hello: "¡Hola, {name}!",
15      items: "{count, plural, one {# elemento} other {# elementos}}",
16    },
17  },
18});
19 
20createRoot(document.getElementById("root")).render(
21  <I18nProvider i18n={i18n}>
22    <App />
23  </I18nProvider>,
24);

1import { createApp } from "vue";
2import { createI18n } from "@comvi/vue";
3import App from "./App.vue";
4 
5const i18n = createI18n({
6  locale: "en",
7  messages: {
8    en: { hello: "Hello, {name}!" },
9    es: { hello: "¡Hola, {name}!" },
10  },
11});
12 
13createApp(App).use(i18n).mount("#app");

1<!-- src/routes/+layout.svelte -->
2<script>
3  import { createI18n, setI18nContext } from "@comvi/svelte";
4 
5  const { children } = $props();
6 
7  const i18n = createI18n({
8    locale: "en",
9    messages: {
10      en: { hello: "Hello, {name}!" },
11      es: { hello: "¡Hola, {name}!" },
12    },
13  });
14 
15  setI18nContext(i18n);
16</script>
17 
18{@render children()}

1import { render } from "solid-js/web";
2import { createI18n, I18nProvider } from "@comvi/solid";
3import App from "./App";
4 
5const i18n = createI18n({
6  locale: "en",
7  messages: {
8    en: { hello: "Hello, {name}!" },
9    es: { hello: "¡Hola, {name}!" },
10  },
11});
12 
13render(
14  () => (
15    <I18nProvider i18n={i18n}>
16      <App />
17    </I18nProvider>
18  ),
19  document.getElementById("root"),
20);

1// src/i18n/routing.ts
2import { defineRouting } from "@comvi/next/routing";
3 
4export const routing = defineRouting({
5  locales: ["en", "es"],
6  defaultLocale: "en",
7});
8 
9// src/i18n/config.ts
10import { createNextI18n } from "@comvi/next";
11import { routing } from "./routing";
12 
13export const { i18n } = createNextI18n({
14  ...routing,
15  messages: {
16    en: { hello: "Hello, {name}!" },
17    es: { hello: "¡Hola, {name}!" },
18  },
19});
20 
21// next.config.ts, the [locale] layout and the middleware
22// are in the quick start: comvi.io/docs/i18n/quick-start

1// nuxt.config.ts
2export default defineNuxtConfig({
3  modules: ["@comvi/nuxt"],
4  comvi: {
5    locales: ["en", "es"],
6    defaultLocale: "en",
7    messages: {
8      en: { hello: "Hello, {name}!" },
9      es: { hello: "¡Hola, {name}!" },
10    },
11  },
12});

1i18n.t("hello", { name: "World" });        // "Hello, World!"
2i18n.t("items", { count: 5 });             // "5 items"
3 
4await i18n.setLocale("es");
5i18n.t("hello", { name: "World" });        // "¡Hola, World!"
6i18n.t("items", { count: 5 });             // "5 elementos"

1import { useI18n } from "@comvi/react";
2 
3export default function App() {
4  const { t, setLocale } = useI18n();
5 
6  return (
7    <>
8      <h1>{t("hello", { name: "World" })}</h1>
9      <p>{t("items", { count: 5 })}</p>
10      <button onClick={() => setLocale("es")}>Español</button>
11    </>
12  );
13}

1<script setup>
2import { useI18n } from "@comvi/vue";
3 
4const { t, setLocale } = useI18n();
5</script>
6 
7<template>
8  <h1>{{ t("hello", { name: "World" }) }}</h1>
9  <button @click="setLocale('es')">Español</button>
10</template>

1<script>
2  import { useI18n } from "@comvi/svelte";
3 
4  const { t, setLocale } = useI18n();
5</script>
6 
7<h1>{$t("hello", { name: "World" })}</h1>
8<button onclick={() => setLocale("es")}>Español</button>

1import { useI18n } from "@comvi/solid";
2 
3export default function App() {
4  const { t, setLocale } = useI18n();
5 
6  return (
7    <>
8      <h1>{t("hello", { name: "World" })}</h1>
9      <button onClick={() => setLocale("es")}>Español</button>
10    </>
11  );
12}

1// src/app/[locale]/page.tsx
2import { getI18n } from "@comvi/next/server";
3 
4export default async function Page({ params }) {
5  const { locale } = await params;
6  const { t } = await getI18n({ locale });
7 
8  return <h1>{t("hello", { name: "World" })}</h1>;
9}

1<!-- app/pages/index.vue -->
2<script setup>
3const { t } = useI18n();
4</script>
5 
6<template>
7  <h1>{{ t("hello", { name: "World" }) }}</h1>
8  <NuxtLinkLocale to="/" locale="es">Español</NuxtLinkLocale>
9</template>