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";
2 
3const i18n = createI18n({
4  language: "en",
5  translation: {
6    en: {
7      hello: "Hello, {name}!",
8      items: "{count, plural, one {# item} other {# items}}",
9    },
10    es: {
11      hello: "¡Hola, {name}!",
12      items: "{count, plural, one {# elemento} other {# elementos}}",
13    },
14  },
15});
16 
17await i18n.init();

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

1import { createI18n } from "@comvi/vue";
2 
3const i18n = createI18n({
4  language: "en",
5  translation: {
6    en: { hello: "Hello, {name}!" },
7    es: { hello: "¡Hola, {name}!" },
8  },
9});
10 
11await i18n.init();
12app.use(i18n);

1import { createI18n } from "@comvi/svelte";
2 
3export const i18n = createI18n({
4  language: "en",
5  translation: {
6    en: { hello: "Hello, {name}!" },
7    es: { hello: "¡Hola, {name}!" },
8  },
9});
10 
11await i18n.init();

1import { createI18n } from "@comvi/solid";
2 
3const i18n = createI18n({
4  language: "en",
5  translation: {
6    en: { hello: "Hello, {name}!" },
7    es: { hello: "¡Hola, {name}!" },
8  },
9});
10 
11await i18n.init();

1// i18n.ts
2import { createNextI18n } from "@comvi/next";
3import en from "./locales/en.json";
4import es from "./locales/es.json";
5 
6const nextI18n = createNextI18n({
7  locales: ["en", "es"],
8  defaultLocale: "en",
9  translation: { en, es },
10});
11 
12export const { i18n, routing } = nextI18n;

1// nuxt.config.ts
2export default defineNuxtConfig({
3  modules: ["@comvi/nuxt"],
4  comvi: {
5    locales: ["en", "es"],
6    defaultLocale: "en",
7  },
8});

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

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

1<script setup>
2const { t } = useI18n();
3</script>
4 
5<template>
6  <h1>{{ t("hello", { name: "World" }) }}</h1>
7</template>

1<script>
2  import { t } from "./i18n";
3</script>
4 
5<h1>{$t("hello", { name: "World" })}</h1>

1import { useI18n } from "@comvi/solid";
2 
3function Hello() {
4  const { t } = useI18n();
5  return <h1>{t("hello", { name: "World" })}</h1>;
6}

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

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