@comvi/nuxt

Comvi i18n

A small, framework-agnostic i18n library with bindings for React, Next.js, Vue, Nuxt, Svelte and Solid,
and a platform that serves translations over a CDN.

Documentation  ·  Quick start  ·  Live examples  ·  Comvi Platform

Comvi i18n puts translated text on screen from a catalog in your source or from the Comvi platform over a CDN. createI18n() returns the i18n instance, which holds the catalog, the current locale and t(); a binding hands it to your framework. ICU plurals, async loading, locale detection and the in-context editor are opt-in: you compose them with .use(), and an app carries only what it names.

Install

One package per framework; each binding brings @comvi/core with it.

npm install @comvi/react
npm install @comvi/next     # Peers: next ^15 || ^16, react ^18.2 || ^19
npm install @comvi/vue
npm install @comvi/nuxt
npm install @comvi/svelte
npm install @comvi/solid
npm install @comvi/core     # vanilla JavaScript

The packages are ESM-only and versioned in lockstep, so install matching versions of every @comvi/* package. The runtime packages need Node 20 or newer; @comvi/cli and @comvi/vite-plugin need Node 22.

Quick start

Create the i18n instance and hand it to React, in src/main.tsx:

import { createRoot } from "react-dom/client";
import { createI18n, I18nProvider, useI18n } from "@comvi/react";

const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
  messages: {
    en: { greeting: "Hello, {name}!" },
    uk: { greeting: "Привіт, {name}!" },
  },
});

function App() {
  const { t } = useI18n();
  return <h1>{t("greeting", { name: "Alice" })}</h1>;
}

createRoot(document.getElementById("root")!).render(
  <I18nProvider i18n={i18n}>
    <App />
  </I18nProvider>,
);

createI18n builds the i18n instance, <I18nProvider> initializes it, and useI18n() gives your components t(), the current locale and setLocale(). The same three calls in every binding: Quick start.

Connect to Comvi

npm install @comvi/plugin-fetch-loader

Compose the loader on the instance, in src/main.tsx:

import { createRoot } from "react-dom/client";
import { createI18n, I18nProvider } from "@comvi/react";
import { cdnLoader } from "@comvi/plugin-fetch-loader";
import App from "./App";

const i18n = createI18n({
  locale: "en",
  fallbackLocale: "en",
}).use(cdnLoader({ cdnUrl: "https://cdn.comvi.io/<project-token>" }));

createRoot(document.getElementById("root")!).render(
  <I18nProvider i18n={i18n} fallback={<div className="spinner" />}>
    <App />
  </I18nProvider>,
);

.use(cdnLoader({ cdnUrl })) fetches each locale from the CDN, so a wording change ships when a translator saves it, without a redeploy. The CDN URL comes from Settings → Content Deploy in the Comvi project; the walkthrough is Connect to Comvi. If your keys use ICU ({count, plural, …}), add compiler: icuCompiler as on Plurals and ICU; the platform and the compiler are independent.

Plugins and tooling

locale-routing and typegen are private workspace packages, inlined into the packages above at build time.

Repository

A pnpm + Turborepo monorepo: packages/ holds the workspace packages, examples/ the runnable StackBlitz demos, docs/design/ the design notes, test-apps/ this workspace's own CI apps and tooling/ the shared Vite/Vitest config. pnpm install && pnpm build && pnpm -w run test runs the whole thing; the gates a change has to pass are in CONTRIBUTING.md.

License

MIT © Comvi