nuxt-i18n-micro 1.1.12 → 1.1.14

package/README.md

@@ -176,6 +176,46 @@ $mergeTranslations({
 })
 ```
 
+## `$defineI18nRoute(routeDefinition: { locales?: string[] | Record<string, Record<string, TranslationObject>> })`
+Defines route behavior based on the current locale. This method can be used to control access to specific routes based on available locales or to provide translations for specific locales.
+
+- `locales`: This property determines which locales are available for the route. It can be either:
+  - An array of strings, where each string represents an available locale (e.g., `['en', 'fr', 'de']`).
+  - An object where each key is a locale code, and the value is either an object containing translations or an empty object if you do not wish to provide translations for that locale.
+
+### Example 1: Controlling Access Based on Locales
+
+```typescript
+import { useNuxtApp } from '#imports'
+
+const { $defineI18nRoute } = useNuxtApp()
+
+$defineI18nRoute({
+  locales: ['en', 'fr', 'de'] // Only these locales are allowed for this route
+})
+```
+
+### Example 2: Providing Translations for Locales
+
+```typescript
+import { useNuxtApp } from '#imports'
+
+const { $defineI18nRoute } = useNuxtApp()
+
+$defineI18nRoute({
+  locales: {
+    en: { greeting: 'Hello', farewell: 'Goodbye' },
+    fr: { greeting: 'Bonjour', farewell: 'Au revoir' },
+    de: { greeting: 'Hallo', farewell: { aaa: { bbb: "Auf Wiedersehen" } } },
+    ru: {} // Russian locale is allowed but no translations are provided
+  }
+})
+```
+
+### Explanation:
+- **Locales Array**: If you only want to specify which locales are allowed for a route, pass an array of locale codes. The user will only be able to access this route if the current locale is in this list.
+- **Locales Object**: If you want to provide specific translations for each locale, pass an object where each key is a locale code. The value should be an object with key-value pairs for translations. If you do not wish to provide translations for a locale but still want to allow access, pass an empty object (`{}`) for that locale.
+
 ## useNuxtApp
 
 ```ts
@@ -301,6 +341,139 @@ To further optimize performance, `Nuxt I18n Micro` supports caching and pre-rend
 - **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.
 
 
+Certainly! Here's an updated section for your README that includes the description of the `<i18n-t>` component, along with explanations for each prop and examples of usage.
+
+---
+
+## `<i18n-t>` Component
+
+The `<i18n-t>` component in `Nuxt I18n Micro` is a flexible and powerful tool designed to handle translations within your Nuxt application. It supports various features such as interpolation, pluralization, and dynamic HTML rendering.
+
+### Component Props
+
+- **`keypath`** (`string`, required): The translation key used to look up the corresponding translation string from the locale files.
+
+- **`plural`** (`number | null`, optional): The count used for pluralization. If provided, the component will use the `$tc` method for translating based on the pluralization rules defined for the locale.
+
+- **`tag`** (`string`, optional, default: `'span'`): The HTML tag used to wrap the translated content. You can specify any valid HTML tag, such as `div`, `p`, `h1`, etc.
+
+- **`scope`** (`string`, optional, default: `'global'`): Specifies the scope of the translation. This prop is useful if you have different translation scopes in your application, although the default is set to `'global'`.
+
+- **`params`** (`Record<string, string | number | boolean>`, optional, default: `() => ({})`): An object containing key-value pairs to be interpolated into the translation string. This is useful for dynamic translations where certain values need to be inserted into the text.
+
+- **`defaultValue`** (`string`, optional, default: `''`): A fallback translation that will be displayed if the `keypath` does not match any key in the translation files.
+
+- **`html`** (`boolean`, optional, default: `false`): A flag indicating whether the translation contains HTML. When set to `true`, the translated string will be rendered as raw HTML.
+
+- **`locale`** (`string`, optional): The locale to use for this translation. If not provided, the component will use the current locale set by the application.
+
+- **`wrap`** (`boolean`, optional, default: `true`): Determines if the translated content should be wrapped in the specified `tag`. If set to `false`, the component will not wrap the translation in an HTML element.
+
+- **`customPluralRule`** (`(value: string, count: number, locale: string) => string`, optional): A custom function for handling pluralization. This allows you to override the default pluralization behavior with your custom logic.
+
+- **`hideIfEmpty`** (`boolean`, optional, default: `false`): If `true`, the component will not render anything if the translation string is empty. This is useful for conditional rendering based on the presence of a translation.
+
+### Examples of Usage
+
+#### Basic Usage
+
+```vue
+<i18n-t keypath="welcomeMessage"></i18n-t>
+```
+
+This will render the translation associated with the key `welcomeMessage` using the current locale.
+
+#### Pluralization
+
+```vue
+<i18n-t keypath="apples" :plural="10" tag="div"></i18n-t>
+```
+
+This will handle the pluralization for the translation key `apples` and render it inside a `div` element.
+
+#### Interpolation with Parameters
+
+```vue
+<i18n-t keypath="greeting" :params="{ name: 'John' }"></i18n-t>
+```
+
+Assuming the translation string is `"Hello, {name}!"`, this will render `"Hello, John!"`.
+
+#### Rendering with HTML Content
+
+```vue
+<i18n-t keypath="richText" :html="true"></i18n-t>
+```
+
+If `richText` contains HTML content like `"<strong>Welcome</strong> to our site!"`, setting `html` to `true` will render the HTML directly.
+
+#### Using a Custom Locale
+
+```vue
+<i18n-t keypath="welcomeMessage" locale="fr"></i18n-t>
+```
+
+This will render the translation in French, overriding the application's current locale.
+
+#### Conditional Rendering
+
+```vue
+<i18n-t keypath="optionalMessage" :hideIfEmpty="true"></i18n-t>
+```
+
+This will render nothing if the translation for `optionalMessage` is empty.
+
+#### Custom Pluralization Rule
+
+```vue
+<i18n-t
+  keypath="items"
+  :plural="itemCount"
+  :customPluralRule="(value, count, locale) => {
+    return count === 1 ? 'One item' : value.replace('{count}', `${count}`)
+  }"></i18n-t>
+```
+
+This uses a custom function to handle the pluralization, bypassing the default logic.
+
+### Advanced Example
+
+```vue
+<i18n-t
+  keypath="notifications"
+  :plural="unreadCount"
+  tag="p"
+  :params="{ username: 'Alice' }"
+  defaultValue="You have no notifications"
+  :html="false"
+  locale="en"
+  :wrap="true"
+  :hideIfEmpty="false">
+</i18n-t>
+```
+
+### Slot Usage Example
+
+Here's how you can use the slot and access the `translation` within it:
+
+```vue
+<i18n-t keypath="welcomeMessage">
+  <template #default="{ translation }">
+    <strong>{{ translation }}</strong>
+  </template>
+</i18n-t>
+```
+
+### Explanation:
+
+- **Slot Prop `translation`**:
+  - The component now provides `translation` as a slot prop, which can be accessed in the parent component’s slot content.
+  - In this example, the translation is wrapped in a `<strong>` tag, allowing you to apply custom styling or further modify how the translation is displayed.
+
+---
+
+The `<i18n-t>` component provides a powerful and flexible way to handle translations in your Nuxt application, accommodating a wide range of use cases from simple text translations to complex pluralization and HTML rendering scenarios.
+
 ## Conclusion
 
 `Nuxt I18n Micro` offers a highly efficient, minimalist approach to internationalization in Nuxt applications. By focusing on performance and simplicity, it provides a powerful alternative to heavier, more complex i18n solutions. Whether you're building a small website or a large-scale application, `Nuxt I18n Micro` helps you manage multilingual content with ease.

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:"e3ab2284-9b25-4b7a-b8d6-8e1f2eb8cf35",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"978c1c94-d4c2-447f-bdbf-d058cee4ff80",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:"e3ab2284-9b25-4b7a-b8d6-8e1f2eb8cf35",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"978c1c94-d4c2-447f-bdbf-d058cee4ff80",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

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

@@ -1 +1 @@
-{"id":"e3ab2284-9b25-4b7a-b8d6-8e1f2eb8cf35","timestamp":1724081837773}
+{"id":"978c1c94-d4c2-447f-bdbf-d058cee4ff80","timestamp":1724092454055}

package/dist/client/_nuxt/builds/meta/978c1c94-d4c2-447f-bdbf-d058cee4ff80.json

@@ -0,0 +1 @@
+{"id":"978c1c94-d4c2-447f-bdbf-d058cee4ff80","timestamp":1724092454055,"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:"e3ab2284-9b25-4b7a-b8d6-8e1f2eb8cf35",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-i18n-micro",buildId:"978c1c94-d4c2-447f-bdbf-d058cee4ff80",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import * as fs from 'node:fs';
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
-import { useNuxt, defineNuxtModule, createResolver, addPlugin, addImportsDir, addServerHandler, extendPages, addPrerenderRoutes } from '@nuxt/kit';
+import { useNuxt, defineNuxtModule, createResolver, addPlugin, addImportsDir, addServerHandler, addComponentsDir, extendPages, addPrerenderRoutes } from '@nuxt/kit';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 
 const DEVTOOLS_UI_PORT = 3030;
@@ -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 };
         });
@@ -91,7 +93,7 @@ const module = defineNuxtModule({
       return (forms.length > 2 ? forms[2].trim() : forms[forms.length - 1].trim()).replace('{count}', count.toString())
     }`
   },
-  setup: function(options, nuxt) {
+  setup: async function(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     nuxt.options.runtimeConfig.public.i18nConfig = {
       rootDir: nuxt.options.rootDir,
@@ -136,6 +138,11 @@ const module = defineNuxtModule({
       route: "/_locales/:page/:locale/data.json",
       handler: resolver.resolve("./runtime/server/middleware/i18n-loader")
     });
+    await addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false,
+      extensions: ["vue"]
+    });
     const localeRegex = options.locales.filter((locale) => locale.code !== options.defaultLocale || options.includeDefaultLocaleRoute).map((locale) => locale.code).join("|");
     const pagesDir = path.resolve(nuxt.options.rootDir, options.translationDir, "pages");
     extendPages((pages) => {

package/dist/runtime/components/i18n-t.vue

@@ -0,0 +1,61 @@
+<template>
+  <component
+    :is="tag"
+    v-if="!hideIfEmpty || translation"
+  >
+    <slot
+      v-if="!html"
+      :translation="translation"
+    >
+      {{ translation }}
+    </slot>
+    <span
+      v-else
+      v-html="translation"
+    />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps, withDefaults } from 'vue'
+import { useNuxtApp } from '#app'
+
+interface Props {
+  keypath: string
+  plural?: number | null
+  tag?: string
+  scope?: string
+  params?: Record<string, string | number | boolean>
+  defaultValue?: string
+  html?: boolean
+  locale?: string
+  wrap?: boolean
+  customPluralRule?: (value: string, count: number, locale: string) => string
+  hideIfEmpty?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  plural: null,
+  tag: 'span',
+  scope: 'global',
+  params: () => ({}),
+  defaultValue: '',
+  html: false,
+  locale: undefined,
+  wrap: true,
+  hideIfEmpty: false,
+})
+
+const nuxtApp = useNuxtApp()
+
+const translation = computed<string>(() => {
+  const localeToUse = props.locale || nuxtApp.$getLocale()
+  const translation = props.plural !== null
+    ? props.customPluralRule
+      ? props.customPluralRule(nuxtApp.$t(props.keypath, props.params), props.plural, localeToUse)
+      : nuxtApp.$tc(props.keypath, props.plural)
+    : nuxtApp.$t(props.keypath, props.params) as string
+
+  return translation || props.defaultValue || props.keypath
+})
+</script>

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

@@ -142,7 +142,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         const route2 = useRoute();
         const routeName = route2.name.replace(`localized-`, "");
         const locale = (route2.params?.locale ?? i18nConfig.defaultLocale).toString();
-        i18nHelper.margeTranslation(routeName, locale, newTranslations);
+        i18nHelper.margeTranslation(locale, routeName, newTranslations);
       },
       switchLocale: (locale) => {
         const route2 = useRoute();

package/dist/runtime/plugins/03.define.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("#app").Plugin<{
     defineI18nRoute: (routeDefinition: {
-        locales?: string[];
+        locales?: string[] | Record<string, Record<string, string>>;
     }) => Promise<void | import("vue-router").NavigationFailure | undefined> | undefined;
 }> & import("#app").ObjectPlugin<{
     defineI18nRoute: (routeDefinition: {
-        locales?: string[];
+        locales?: string[] | Record<string, Record<string, string>>;
     }) => Promise<void | import("vue-router").NavigationFailure | undefined> | undefined;
 }>;
 export default _default;

package/dist/runtime/plugins/03.define.js

@@ -1,15 +1,30 @@
-import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from "#app";
 import { useRoute, useRouter } from "#imports";
 export default defineNuxtPlugin((_nuxtApp) => {
   const config = useRuntimeConfig();
   const route = useRoute();
   const router = useRouter();
   const i18nConfig = config.public.i18nConfig;
+  const normalizeLocales = (locales) => {
+    if (Array.isArray(locales)) {
+      return locales.reduce((acc, locale) => {
+        acc[locale] = {};
+        return acc;
+      }, {});
+    } else if (typeof locales === "object" && locales !== null) {
+      return locales;
+    }
+    return {};
+  };
   const defineI18nRoute = (routeDefinition) => {
     const currentLocale = (route.params.locale || i18nConfig.defaultLocale).toString();
-    const { locales } = routeDefinition;
+    const normalizedLocales = normalizeLocales(routeDefinition.locales);
     const { name } = route;
-    if (locales && !locales.includes(currentLocale)) {
+    if (normalizedLocales[currentLocale]) {
+      const translation = normalizedLocales[currentLocale];
+      const nuxtApp = useNuxtApp();
+      nuxtApp.$mergeTranslations(translation);
+    } else {
       let defaultRouteName = name?.toString().replace("localized-", "");
       const resolvedRoute = router.resolve({ name: defaultRouteName });
       const newParams = { ...route.params };

package/dist/runtime/translationHelper.js

@@ -40,7 +40,7 @@ export function useTranslationHelper() {
     },
     margeTranslation(locale, routeName, newTranslations) {
       if (!routeLocaleCache[`${locale}:${routeName}`]) {
-        console.error(`marge: route ${routeName} not loaded`);
+        console.error(`marge: route ${locale}:${routeName} not loaded`);
       }
       routeLocaleCache[`${locale}:${routeName}`] = {
         ...generalLocaleCache[locale],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-i18n-micro",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "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/e3ab2284-9b25-4b7a-b8d6-8e1f2eb8cf35.json

@@ -1 +0,0 @@
-{"id":"e3ab2284-9b25-4b7a-b8d6-8e1f2eb8cf35","timestamp":1724081837773,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}