nuxt-i18n-micro 1.1.11 → 1.1.13

package/README.md

@@ -257,6 +257,49 @@ The module accepts the following options in the Nuxt configuration:
 - **autoDetectLanguage**: If `true`, automatically detects the user's preferred language and redirects accordingly.
 - **plural**: A custom function for handling pluralization.
 - **includeDefaultLocaleRoute**: A boolean. If enabled, all routes without a locale prefix will redirect to the default locale route.
+- **cache**: (In development) A boolean option designed to optimize performance when working with large JSON translation files. When enabled, it caches translations specific to the current page, reducing search times and minimizing client-side load. This cached data is then sent to the client, resulting in faster page loads and improved user experience.
+
+## Locale Loading in Nuxt I18n Micro
+
+The `Nuxt I18n Micro` module provides an efficient way to manage internationalization (i18n) in your Nuxt application, with a focus on performance and simplicity. One of the key features of this module is how it handles the loading of locale-specific translations. Below is an explanation of how this process works.
+
+### How Locale Loading Works
+
+In `Nuxt I18n Micro`, translations are loaded dynamically based on the user's selected locale. The module uses a specific route pattern (`/_locales/:page/:locale/data.json`) to fetch the translation files for each page and locale. This approach is designed to minimize the initial load time and only load the necessary translations for the current page and locale.
+
+#### Route Structure
+
+The translations are organized into JSON files located in the `locales` directory. These files are split into:
+
+- **Global Files**: Located at `locales/{locale}.json` (e.g., `locales/en.json`). These files contain translations shared across the entire application, such as menu items or common UI elements.
+- **Page-Specific Files**: Located at `locales/pages/{routeName}/{locale}.json` (e.g., `locales/pages/index/en.json`). These files contain translations specific to individual pages.
+
+#### Dynamic Locale Routes
+
+To accommodate the dynamic nature of translation loading, `Nuxt I18n Micro` extends the default routing configuration by adding locale-specific routes. This means that for each page, a localized version of the route is generated. For example, if your application has an `index` page and supports English (`en`) and French (`fr`), the following routes would be generated:
+
+- `/en/index`
+- `/fr/index`
+
+This structure allows the module to load the appropriate translations based on the user's selected locale.
+
+### Loading Translations via _locales Route
+
+Given the way Vite and Nuxt handle modules, the `Nuxt I18n Micro` module uses a special route (`/_locales/:page/:locale/data.json`) to fetch translations. This is necessary because, during the build process, Vite may not bundle all translation files directly into the application. Instead, the module dynamically loads these files from the server as needed.
+
+When a user navigates to a page, the module will:
+
+1. Check if the necessary translation file for the current page and locale is already loaded in the cache.
+2. If not, it will send a request to the `_locales` route to fetch the required translation file.
+3. Once the translation file is loaded, it is cached for future use, ensuring that the translations are readily available when the user navigates to another part of the application.
+
+### Caching and Pre-rendering
+
+To further optimize performance, `Nuxt I18n Micro` supports caching and pre-rendering of translation files:
+
+- **Caching**: Once a translation file is loaded, it is stored in the cache, reducing the need for subsequent requests.
+- **Pre-rendering**: During the build process, the module can pre-render translation files for all configured locales and routes, which are then served directly from the server without the need for runtime requests.
+
 
 ## Conclusion
 

package/dist/client/200.html

@@ -8,4 +8,4 @@
 <link rel="prefetch" as="style" href="/__nuxt-i18n-micro/_nuxt/error-500.B4KzowuE.css">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/HZLiFEh-.js">
 <script type="module" src="/__nuxt-i18n-micro/_nuxt/6EJ4fAZ2.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"9969f09f-b918-4abc-aac8-448faa6d5c24",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"33e4725a-6e72-421d-9f05-ad578b99d841",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/client/404.html

@@ -8,4 +8,4 @@
 <link rel="prefetch" as="style" href="/__nuxt-i18n-micro/_nuxt/error-500.B4KzowuE.css">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/HZLiFEh-.js">
 <script type="module" src="/__nuxt-i18n-micro/_nuxt/6EJ4fAZ2.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"9969f09f-b918-4abc-aac8-448faa6d5c24",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"33e4725a-6e72-421d-9f05-ad578b99d841",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/client/_nuxt/builds/latest.json

@@ -1 +1 @@
-{"id":"9969f09f-b918-4abc-aac8-448faa6d5c24","timestamp":1724077235706}
+{"id":"33e4725a-6e72-421d-9f05-ad578b99d841","timestamp":1724083257474}

package/dist/client/_nuxt/builds/meta/33e4725a-6e72-421d-9f05-ad578b99d841.json

@@ -0,0 +1 @@
+{"id":"33e4725a-6e72-421d-9f05-ad578b99d841","timestamp":1724083257474,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

package/dist/client/index.html

@@ -8,4 +8,4 @@
 <link rel="prefetch" as="style" href="/__nuxt-i18n-micro/_nuxt/error-500.B4KzowuE.css">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-i18n-micro/_nuxt/HZLiFEh-.js">
 <script type="module" src="/__nuxt-i18n-micro/_nuxt/6EJ4fAZ2.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"9969f09f-b918-4abc-aac8-448faa6d5c24",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"33e4725a-6e72-421d-9f05-ad578b99d841",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-i18n-micro",
   "configKey": "i18n",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -33,7 +33,7 @@ function setupDevToolsUI(options, resolve) {
         const localesDir = path.join(nuxt.options.rootDir, options.translationDir || "locales");
         const pagesDir = path.join(nuxt.options.rootDir, options.translationDir || "locales", "pages");
         const localeFiles = fs.readdirSync(localesDir);
-        const pageFiles = fs.readdirSync(pagesDir);
+        const pageDirs = fs.readdirSync(pagesDir).filter((file) => fs.lstatSync(path.join(pagesDir, file)).isDirectory());
         const locales = options.locales?.map((locale) => locale.code) || [];
         return locales.map((locale) => {
           const files = localeFiles.filter((file) => file.startsWith(locale));
@@ -42,11 +42,13 @@ function setupDevToolsUI(options, resolve) {
             acc[file] = JSON.parse(fs.readFileSync(filePath, "utf-8"));
             return acc;
           }, {});
-          const pageLocaleFiles = pageFiles.filter((file) => file.endsWith(`_${locale}.json`));
-          pageLocaleFiles.forEach((file) => {
-            const filePath = path.join(pagesDir, file);
-            content[file] = JSON.parse(fs.readFileSync(filePath, "utf-8"));
-            files.push(file);
+          pageDirs.forEach((dir) => {
+            const pageLocaleFilePath = path.join(pagesDir, dir, `${locale}.json`);
+            if (fs.existsSync(pageLocaleFilePath)) {
+              const fileKey = path.join(dir, `${locale}.json`);
+              content[fileKey] = JSON.parse(fs.readFileSync(pageLocaleFilePath, "utf-8"));
+              files.push(fileKey);
+            }
           });
           return { locale, files, content };
         });

package/dist/runtime/plugins/01.plugin.d.ts

@@ -45,19 +45,6 @@ declare module 'nuxt/dist/app/nuxt' {
     interface NuxtApp extends PluginsInjections {
     }
 }
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $getLocale: () => string;
-        $getLocales: () => string[];
-        $t: <T extends Record<string, string | number | boolean>>(key: string, params?: T, defaultValue?: string) => string | number | boolean | Translations | PluralTranslations | unknown[] | unknown | null;
-        $tc: (key: string, count: number, defaultValue?: string) => string;
-        $has: (key: string) => boolean;
-        $mergeTranslations: (newTranslations: Translations) => void;
-        $switchLocale: (locale: string) => void;
-        $localeRoute: (to: RouteLocationRaw, locale?: string) => RouteLocationRaw;
-        $loadPageTranslations: (locale: string, routeName: string) => Promise<void>;
-    }
-}
 declare module 'vue' {
     interface ComponentCustomProperties extends PluginsInjections {
     }

package/dist/runtime/plugins/01.plugin.js

@@ -1,6 +1,6 @@
 import { useTranslationHelper } from "../translationHelper.js";
 import { defineNuxtPlugin, useRuntimeConfig } from "#app";
-import { useFetch, useRoute, useRouter } from "#imports";
+import { useRoute, useRouter } from "#imports";
 const i18nHelper = useTranslationHelper();
 const isDev = process.env.NODE_ENV !== "production";
 function interpolate(template, params) {
@@ -74,21 +74,19 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       const locale = (to.params?.locale ?? i18nConfig.defaultLocale).toString();
       const routeName = to.name.replace(`localized-`, "");
       if (!i18nHelper.hasPageTranslation(locale, routeName)) {
-        const resp = await fetch(`/_locales/${routeName}/${locale}/data.json`);
-        if (resp.ok) {
-          await i18nHelper.loadPageTranslations(locale, routeName, await resp.json());
-        }
+        const data2 = await $fetch(`/_locales/${routeName}/${locale}/data.json`);
+        await i18nHelper.loadPageTranslations(locale, routeName, data2 ?? {});
       }
     }
     next();
   });
-  const { data } = await useFetch(`/_locales/general/${initialLocale}/data.json`);
-  await i18nHelper.loadTranslations(initialLocale, initialRouteName, data.value ?? {});
+  const data = await $fetch(`/_locales/general/${initialLocale}/data.json`);
+  await i18nHelper.loadTranslations(initialLocale, initialRouteName, data ?? {});
   if (import.meta.server) {
     const locale = (route.params?.locale ?? i18nConfig.defaultLocale).toString();
     const routeName = route.name.replace(`localized-`, "");
-    const { data: data2 } = await useFetch(`/_locales/${routeName}/${locale}/data.json`);
-    await i18nHelper.loadPageTranslations(initialLocale, initialRouteName, data2.value ?? {});
+    const data2 = await $fetch(`/_locales/${routeName}/${locale}/data.json`);
+    await i18nHelper.loadPageTranslations(initialLocale, initialRouteName, data2 ?? {});
   }
   return {
     provide: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-i18n-micro",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "Nuxt I18n Micro is a lightweight, high-performance internationalization module for Nuxt, designed to handle multi-language support with minimal overhead, fast build times, and efficient runtime performance.",
   "repository": "s00d/nuxt-i18n-micro",
   "license": "MIT",

package/dist/client/_nuxt/builds/meta/9969f09f-b918-4abc-aac8-448faa6d5c24.json

@@ -1 +0,0 @@
-{"id":"9969f09f-b918-4abc-aac8-448faa6d5c24","timestamp":1724077235706,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}