@uipkge/nuxt 0.1.13 → 0.1.15

package/README.md

@@ -8,7 +8,7 @@ Nuxt module for [i18now](https://i18now.com) — loads translations from the i18
 - Reloads translations on locale switch (client-side)
 - In development: detects missing translation keys and syncs them to i18now automatically
 - Suppresses vue-i18n missing-key warnings in dev — missing keys are expected until published
-- API key is never exposed to the browser (proxied through a local Nuxt server route)
+- API key is only present in development builds — never shipped to production
 - Zero bundle impact in production — dev-only code is tree-shaken at build time
 
 ## Installation
@@ -47,7 +47,7 @@ export default defineNuxtConfig({
 | Option        | Type       | Default                    | Description                                                                 |
 |---------------|------------|----------------------------|-----------------------------------------------------------------------------|
 | `projectId`   | `string`   | —                          | **Required.** Your i18now project ID.                                       |
-| `apiKey`      | `string`   | —                          | **Required.** Your i18now API key. Never sent to the browser.               |
+| `apiKey`      | `string`   | —                          | **Required.** Your i18now API key. Only used in dev builds.                 |
 | `host`        | `string`   | `https://i18now.com`       | i18now server URL. Set to `http://localhost:3220` for local development.    |
 | `cdnUrl`      | `string`   | `https://cdn.i18now.com`   | CDN base URL where published translations are served.                       |
 | `environment` | `string`   | `'dev'`                    | Which published environment to load translations from (`dev`, `stage`, `prod`). |
@@ -71,24 +71,24 @@ The server plugin fetches the published translation JSON from the CDN (`{cdnUrl}
 
 ### Development
 
-The client plugin intercepts every `$t()` and `useI18n().t()` call. When a key is missing from the CDN snapshot it batches that key (with its default value) and POSTs it to a local Nuxt server route (`/api/_i18now/sync`). The server route adds the API key and forwards the request to i18now — so your API key never appears in browser network requests.
+The client plugin intercepts every `$t()` and `useI18now().t()` call. When a key is missing from the CDN snapshot it batches that key (with its default value) and POSTs it directly to the i18now sync endpoint.
 
 ```
 Browser $t('key', 'Default text')
   → client plugin detects missing key
-  → POST /api/_i18now/sync  { keys: [{ key, value }] }
-  → Nuxt server adds apiKey
-  → POST i18now /api/v1/projects/:id/sync
+  → POST i18now /api/v1/projects/:id/sync  { apiKey, keys }
+  → i18now creates the key with source value
 ```
 
-The `useI18n` composable is auto-imported by the module and silently overrides the one from `@nuxtjs/i18n` — no changes to existing component code are required.
+The `useI18now` composable is auto-imported by the module. Use it in place of `useI18n` from vue-i18n — it adds sync detection on top of the standard `t()` function.
 
 Vue-i18n's missing-key and fallback warnings are suppressed automatically in dev. Keys are expected to be absent until they are published from the i18now dashboard, at which point they load from CDN and no longer trigger warnings.
 
 ## Security
 
-- `apiKey` is stored in Nuxt's private (server-only) `runtimeConfig` — it is never serialised into the client bundle or sent in any browser request.
+- `apiKey` is only included in `runtimeConfig.public` during **development** builds (`nuxt.options.dev`). In production, the API key is never serialised into the client bundle or `__NUXT__` payload.
 - The `syncIn` option defaults to `['development']`. **Never add `'production'` or `'staging'`** — doing so would expose your API key to end users and flood your project with traffic.
+- The client sync plugin is only registered in dev mode — it is completely absent from production builds.
 
 ## Local development against a local i18now server
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.13",
+  "version": "0.1.15",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -21,8 +21,11 @@ const module$1 = defineNuxtModule({
     if (!options.apiKey) {
       console.warn("[i18now] apiKey is required. The module will not work until it is set.");
     }
+    if (options.cdnUrl && !options.cdnUrl.startsWith("http")) {
+      console.warn("[i18now] cdnUrl should be a valid HTTP(S) URL. Got: " + options.cdnUrl);
+    }
     const dangerousEnvs = (options.syncIn ?? []).filter(
-      (e) => ["production", "staging", "prod", "stage"].includes(e)
+      (e) => ["production", "staging", "prod", "stage"].includes(e.toLowerCase())
     );
     if (dangerousEnvs.length > 0) {
       console.error(
@@ -31,17 +34,26 @@ const module$1 = defineNuxtModule({
     }
     nuxt.options.runtimeConfig.public.i18now = {
       projectId: options.projectId,
-      apiKey: options.apiKey,
-      host: options.host,
       cdnUrl: options.cdnUrl,
       environment: options.environment,
-      syncIn: options.syncIn,
-      locale: options.locale
+      locale: options.locale,
+      // Dev-only fields — only included when the sync client plugin is active.
+      // In production builds these are undefined and the client plugin is not registered.
+      ...nuxt.options.dev ? {
+        apiKey: options.apiKey,
+        host: options.host,
+        syncIn: options.syncIn
+      } : {}
     };
     addPlugin({
       src: resolver.resolve("./runtime/plugin"),
       mode: "server"
     });
+    addImports({
+      name: "useI18now",
+      as: "useI18now",
+      from: resolver.resolve("./runtime/composables/useI18n")
+    });
     if (nuxt.options.dev) {
       addPlugin({
         src: resolver.resolve("./runtime/plugin.client"),
@@ -50,12 +62,6 @@ const module$1 = defineNuxtModule({
       addPlugin({
         src: resolver.resolve("./runtime/plugin.suppress-warnings")
       });
-      addImports({
-        name: "useI18n",
-        as: "useI18n",
-        from: resolver.resolve("./runtime/composables/useI18n"),
-        priority: 2
-      });
     }
   }
 });

package/dist/runtime/composables/useI18n.d.ts

@@ -3,9 +3,11 @@ type UseI18nOptions = Parameters<typeof _useI18n>[0];
 type UseI18nReturn = ReturnType<typeof _useI18n>;
 /**
  * Drop-in replacement for useI18n() that wraps t() to sync missing keys to i18now.
- * Auto-imported by the @uipkge/nuxt module — no code changes required.
+ * Use this instead of useI18n() — auto-imported by the @uipkge/nuxt module.
+ *
+ * Migration: find-replace `useI18n()` → `useI18now()` in your components.
  */
-export declare function useI18n(options?: UseI18nOptions): UseI18nReturn & {
+export declare function useI18now(options?: UseI18nOptions): UseI18nReturn & {
     te: (key: string, locale?: string) => boolean;
 };
 export {};

package/dist/runtime/composables/useI18n.js

@@ -1,11 +1,11 @@
 import { useNuxtApp } from "#app";
 import { useI18n as _useI18n } from "vue-i18n";
-export function useI18n(options) {
+export function useI18now(options) {
   const i18n = _useI18n({ useScope: "global", ...options });
   const nuxtApp = useNuxtApp();
   const originalT = i18n.t.bind(i18n);
   const patchedT = (key, defaultValue, ...rest) => {
-    const result = typeof defaultValue === "object" && defaultValue !== null ? originalT(key, defaultValue) : originalT(key);
+    const result = defaultValue !== void 0 ? originalT(key, defaultValue) : originalT(key);
     const sync = nuxtApp.$i18nowSync;
     const defaultStr = typeof defaultValue === "string" ? defaultValue : typeof rest[0] === "string" ? rest[0] : void 0;
     if (sync && !sync.existingKeys.has(key) && defaultStr !== void 0) {

package/dist/runtime/plugin.client.js

@@ -67,22 +67,43 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     debug: import.meta.dev
   });
   const locale = i18nGlobal?.locale?.value ?? i18nGlobal?.locale ?? configLocale;
+  let loadLocaleController = null;
   async function loadLocale(targetLocale) {
+    if (loadLocaleController) loadLocaleController.abort();
+    loadLocaleController = new AbortController();
+    const { signal } = loadLocaleController;
     try {
       const url = `${cdnUrl}/${projectId}/publish/${environment}/${targetLocale}.json`;
-      const res = await fetch(url, { signal: AbortSignal.timeout(8e3) });
+      const timeout = setTimeout(() => loadLocaleController?.abort(), 5e3);
+      const res = await fetch(url, { signal });
+      clearTimeout(timeout);
       if (res.ok) {
         const data = await res.json();
+        if (typeof data !== "object" || data === null || Array.isArray(data)) {
+          if (import.meta.dev) {
+            console.warn(`[i18now] CDN response for locale '${targetLocale}' is not a valid object. Skipping.`);
+          }
+          syncer.setExistingKeys([]);
+          return;
+        }
         syncer.setExistingKeys(Object.keys(data));
         i18nGlobal?.setLocaleMessage(targetLocale, data);
-      } else if (import.meta.dev) {
-        console.warn(
-          `[i18now] Could not load translations from CDN (${res.status}). All keys will be sent to sync \u2014 this is safe, the backend deduplicates them. URL: ${url}`
-        );
+      } else {
+        syncer.setExistingKeys([]);
+        if (import.meta.dev) {
+          console.warn(
+            `[i18now] Could not load translations from CDN (${res.status}). All keys will be sent to sync \u2014 this is safe, the backend deduplicates them. URL: ${url}`
+          );
+        }
       }
     } catch (err) {
+      syncer.setExistingKeys([]);
       if (import.meta.dev) {
-        console.warn(`[i18now] CDN fetch failed for locale '${targetLocale}':`, err);
+        const isTimeout = err instanceof DOMException && err.name === "AbortError";
+        console.warn(
+          `[i18now] CDN fetch ${isTimeout ? "timed out" : "failed"} for locale '${targetLocale}'${isTimeout ? "" : ":"}`,
+          ...isTimeout ? [] : [err]
+        );
       }
     }
   }
@@ -90,7 +111,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const originalGlobalT = nuxtApp.vueApp.config.globalProperties.$t;
   if (originalGlobalT) {
     nuxtApp.vueApp.config.globalProperties.$t = function(key, defaultValue, ...rest) {
-      const result = typeof defaultValue === "object" && defaultValue !== null ? originalGlobalT.call(this, key, defaultValue) : originalGlobalT.call(this, key);
+      const result = defaultValue !== void 0 ? originalGlobalT.call(this, key, defaultValue) : originalGlobalT.call(this, key);
       const defaultStr = typeof defaultValue === "string" ? defaultValue : typeof rest[0] === "string" ? rest[0] : void 0;
       if (!syncer.existingKeys.has(key) && defaultStr !== void 0) {
         syncer.syncKey(key, defaultStr);

package/dist/runtime/plugin.js

@@ -6,7 +6,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   async function loadLocale(locale) {
     try {
       const url = `${cdnUrl}/${projectId}/publish/${environment}/${locale}.json`;
-      const res = await fetch(url, { signal: AbortSignal.timeout(8e3) });
+      const res = await fetch(url, { signal: AbortSignal.timeout(5e3) });
       if (!res.ok) {
         if (import.meta.dev) {
           console.warn(
@@ -15,7 +15,14 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         }
         return;
       }
-      const messages = await res.json();
+      const data = await res.json();
+      if (typeof data !== "object" || data === null || Array.isArray(data)) {
+        if (import.meta.dev) {
+          console.warn(`[i18now] CDN response for locale '${locale}' is not a valid object. Skipping.`);
+        }
+        return;
+      }
+      const messages = data;
       if (i18n) i18n.setLocaleMessage(locale, messages);
     } catch (err) {
       if (import.meta.dev) {

package/dist/runtime/plugin.suppress-warnings.js

@@ -4,7 +4,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   let symbolGlobal;
   if (!directGlobal) {
     const provides = nuxtApp.vueApp._context?.provides ?? {};
-    const i18nSym = Object.getOwnPropertySymbols(provides).find((s) => s.toString() === "Symbol(vue-i18n)");
+    const i18nSym = Object.getOwnPropertySymbols(provides).find((s) => s.toString().startsWith("Symbol(vue-i18n"));
     const i18nInstance = i18nSym ? provides[i18nSym] : void 0;
     symbolGlobal = i18nInstance?.global;
   }

package/package.json

@@ -1,27 +1,22 @@
 {
   "name": "@uipkge/nuxt",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
+      "types": "./dist/module.d.mts",
       "import": "./dist/module.mjs"
     }
   },
   "main": "./dist/module.mjs",
+  "types": "./dist/module.d.mts",
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "nuxt-module-build build",
-    "dev": "nuxt-module-build prepare",
-    "dev:playground": "nuxi dev playground",
-    "prepack": "nuxt-module-build build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "release": "vitest run && nuxt-module-build build && pnpm publish --access public --no-git-checks"
-  },
   "dependencies": {
     "@nuxt/kit": "^3.0.0"
   },
@@ -39,9 +34,18 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.0",
-    "@uipkge/core": "workspace:*",
     "happy-dom": "^17.0.0",
     "nuxt": "^3.0.0",
-    "vitest": "^4.0.0"
+    "vitest": "^4.0.0",
+    "@uipkge/core": "0.1.1"
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt-module-build prepare",
+    "dev:playground": "nuxi dev playground",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "release": "vitest run && nuxt-module-build build && pnpm publish --access public --no-git-checks"
   }
-}
+}

package/dist/runtime/server/sync.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (event: unknown) => unknown;
-export default _default;

package/dist/runtime/server/sync.js

@@ -1,48 +0,0 @@
-import { createError, defineEventHandler, readBody } from "h3";
-export default defineEventHandler(async (event) => {
-  const config = useRuntimeConfig(event);
-  const publicConfig = config.public?.i18now;
-  const env = process.env.NODE_ENV ?? "production";
-  if (!publicConfig?.syncIn?.includes(env)) {
-    throw createError({ statusCode: 403, statusMessage: "Key sync is disabled in this environment" });
-  }
-  if (!publicConfig.projectId || !publicConfig.host) {
-    throw createError({ statusCode: 500, statusMessage: "i18now module is not configured" });
-  }
-  const privateConfig = config.i18now;
-  const apiKey = privateConfig?.apiKey;
-  if (!apiKey) {
-    throw createError({ statusCode: 500, statusMessage: "i18now apiKey is not configured" });
-  }
-  let body;
-  try {
-    body = await readBody(event);
-  } catch {
-    throw createError({ statusCode: 400, statusMessage: "Invalid request body" });
-  }
-  if (!Array.isArray(body?.keys)) {
-    throw createError({ statusCode: 400, statusMessage: 'Request body must contain a "keys" array' });
-  }
-  const validKeys = body.keys.filter(
-    (item) => item !== null && typeof item === "object" && typeof item.key === "string" && item.key.length > 0 && typeof item.value === "string" && item.value.length > 0
-  );
-  if (validKeys.length === 0) {
-    return { synced: 0 };
-  }
-  if (validKeys.length > 100) {
-    throw createError({ statusCode: 400, statusMessage: "Maximum 100 keys per request" });
-  }
-  const res = await fetch(
-    `${publicConfig.host}/api/v1/projects/${publicConfig.projectId}/sync`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ apiKey, keys: validKeys })
-    }
-  );
-  const data = await res.json();
-  if (!res.ok) {
-    throw createError({ statusCode: res.status, data });
-  }
-  return data;
-});