@intlayer/docs 7.3.7 → 7.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/docs/ar/intlayer_with_tanstack.md +52 -1
  2. package/docs/ar/intlayer_with_vite+vue.md +16 -34
  3. package/docs/de/intlayer_with_tanstack.md +52 -1
  4. package/docs/de/intlayer_with_vite+vue.md +16 -34
  5. package/docs/en/intlayer_with_tanstack.md +52 -1
  6. package/docs/en/intlayer_with_vite+vue.md +16 -34
  7. package/docs/en-GB/intlayer_with_tanstack.md +52 -1
  8. package/docs/en-GB/intlayer_with_vite+vue.md +16 -34
  9. package/docs/es/intlayer_with_tanstack.md +52 -1
  10. package/docs/es/intlayer_with_vite+vue.md +16 -34
  11. package/docs/fr/intlayer_with_tanstack.md +52 -1
  12. package/docs/fr/intlayer_with_vite+vue.md +16 -34
  13. package/docs/hi/intlayer_with_tanstack.md +52 -1
  14. package/docs/hi/intlayer_with_vite+vue.md +16 -34
  15. package/docs/id/intlayer_with_tanstack.md +52 -1
  16. package/docs/id/intlayer_with_vite+vue.md +16 -34
  17. package/docs/it/intlayer_with_tanstack.md +52 -1
  18. package/docs/it/intlayer_with_vite+vue.md +16 -34
  19. package/docs/ja/intlayer_with_tanstack.md +52 -1
  20. package/docs/ja/intlayer_with_vite+vue.md +16 -34
  21. package/docs/ko/intlayer_with_tanstack.md +52 -1
  22. package/docs/ko/intlayer_with_vite+vue.md +16 -34
  23. package/docs/pl/intlayer_with_tanstack.md +52 -1
  24. package/docs/pl/intlayer_with_vite+vue.md +16 -34
  25. package/docs/pt/intlayer_with_tanstack.md +52 -1
  26. package/docs/pt/intlayer_with_vite+vue.md +16 -34
  27. package/docs/ru/intlayer_with_tanstack.md +52 -1
  28. package/docs/ru/intlayer_with_vite+vue.md +16 -34
  29. package/docs/tr/intlayer_with_tanstack.md +52 -1
  30. package/docs/tr/intlayer_with_vite+vue.md +16 -34
  31. package/docs/vi/intlayer_with_tanstack.md +52 -1
  32. package/docs/vi/intlayer_with_vite+vue.md +16 -34
  33. package/docs/zh/intlayer_with_tanstack.md +52 -1
  34. package/docs/zh/intlayer_with_vite+vue.md +16 -34
  35. package/package.json +6 -6
@@ -18,6 +18,9 @@ slugs:
18
18
  - tanstack-start
19
19
  applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
20
20
  history:
21
+ - version: 7.3.9
22
+ date: 2025-12-05
23
+ changes: Add step 13: Retrieve the locale in your server actions (Optional)
21
24
  - version: 5.8.1
22
25
  date: 2025-09-09
23
26
  changes: Añadido para Tanstack Start
@@ -532,7 +535,55 @@ export const Route = createFileRoute("/{-$locale}/")({
532
535
 
533
536
  ---
534
537
 
535
- ### Paso 13: Configurar TypeScript (Opcional)
538
+ ### Paso 13: Recuperar la configuración regional en sus acciones del servidor (Opcional)
539
+
540
+ Es posible que desee acceder a la configuración regional actual desde dentro de sus acciones del servidor o endpoints de API.
541
+ Puede hacerlo utilizando el asistente `getLocale` de `intlayer`.
542
+
543
+ Aquí hay un ejemplo usando las funciones del servidor de TanStack Start:
544
+
545
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
546
+ import { createServerFn } from "@tanstack/react-start";
547
+ import {
548
+ getRequestHeader,
549
+ getRequestHeaders,
550
+ } from "@tanstack/react-start/server";
551
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
552
+
553
+ export const getLocaleServer = createServerFn().handler(async () => {
554
+ const locale = await getLocale({
555
+ // Obtener la cookie de la solicitud (por defecto: 'INTLAYER_LOCALE')
556
+ getCookie: (name) => {
557
+ const cookieString = getRequestHeader("cookie");
558
+
559
+ return getCookie(name, cookieString);
560
+ },
561
+ // Obtener el encabezado de la solicitud (por defecto: 'x-intlayer-locale')
562
+ getHeader: (name) => getRequestHeader(name),
563
+ // Respaldo usando negociación Accept-Language
564
+ getAllHeaders: async () => {
565
+ const headers = getRequestHeaders();
566
+ const result: Record<string, string> = {};
567
+
568
+ // Convertir TypedHeaders en un simple Record<string, string>
569
+ for (const [key, value] of headers.entries()) {
570
+ result[key] = value;
571
+ }
572
+
573
+ return result;
574
+ },
575
+ });
576
+
577
+ // Recuperar algún contenido usando getIntlayer()
578
+ const content = getIntlayer("app", locale);
579
+
580
+ return { locale, content };
581
+ });
582
+ ```
583
+
584
+ ---
585
+
586
+ ### Paso 14: Configurar TypeScript (Opcional)
536
587
 
537
588
  Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de TypeScript y fortalecer tu base de código.
538
589
 
@@ -586,53 +586,47 @@ Ejemplo:
586
586
  Primero, instala Vue Router:
587
587
 
588
588
  ```bash packageManager="npm"
589
- npm install intlayer vue-router
589
+ npm install vue-router
590
590
  ```
591
591
 
592
592
  ```bash packageManager="pnpm"
593
- pnpm add intlayer vue-router
593
+ pnpm add vue-router
594
594
  ```
595
595
 
596
596
  ```bash packageManager="yarn"
597
- yarn add intlayer vue-router
597
+ yarn add vue-router
598
598
  ```
599
599
 
600
600
  Luego, crea una configuración de enrutador que maneje el enrutamiento basado en la localidad:
601
601
 
602
602
  ```js fileName="src/router/index.ts"
603
603
  import {
604
- configuration,
605
- getPathWithoutLocale,
606
604
  localeFlatMap,
607
- type Locales,
605
+ type Locale,
608
606
  } from 'intlayer';
609
607
  import { createIntlayerClient } from 'vue-intlayer';
610
608
  import { createRouter, createWebHistory } from 'vue-router';
611
609
  import HomeView from './views/home/HomeView.vue';
612
610
  import RootView from './views/root/Root.vue';
613
611
 
614
- // Obtener la configuración de internacionalización
615
- const { internationalization, middleware } = configuration;
616
- const { defaultLocale } = internationalization;
617
-
618
612
  /**
619
613
  * Declarar las rutas con rutas específicas por localidad y metadatos.
620
614
  */
621
- const routes = localeFlatMap((localizedData) => [
615
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
622
616
  {
623
- path: `${localizedData.urlPrefix}/`,
624
- name: `Root-${localizedData.locale}`,
617
+ path: `${urlPrefix}/`,
618
+ name: `Root-${locale}`,
625
619
  component: RootView,
626
620
  meta: {
627
- locale: localizedData.locale,
621
+ locale,
628
622
  },
629
623
  },
630
624
  {
631
- path: `${localizedData.urlPrefix}/home`,
632
- name: `Home-${localizedData.locale}`,
625
+ path: `${urlPrefix}/home`,
626
+ name: `Home-${locale}`,
633
627
  component: HomeView,
634
628
  meta: {
635
- locale: localizedData.locale,
629
+ locale,
636
630
  },
637
631
  },
638
632
  ]);
@@ -647,23 +641,11 @@ export const router = createRouter({
647
641
  router.beforeEach((to, _from, next) => {
648
642
  const client = createIntlayerClient();
649
643
 
650
- const metaLocale = to.meta.locale as Locales | undefined;
644
+ const metaLocale = to.meta.locale as Locale;
651
645
 
652
- if (metaLocale) {
653
- // Reutilizar el locale definido en los metadatos de la ruta
654
- client.setLocale(metaLocale);
655
- next();
656
- } else {
657
- // Alternativa: sin locale en los metadatos, posiblemente ruta no coincidente
658
- // Opcional: manejar 404 o redirigir al locale por defecto
659
- client.setLocale(defaultLocale);
660
-
661
- if (middleware.prefixDefault) {
662
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
663
- } else {
664
- next(getPathWithoutLocale(to.path));
665
- }
666
- }
646
+ // Reutilizar el locale definido en los metadatos de la ruta
647
+ client.setLocale(metaLocale);
648
+ next();
667
649
  });
668
650
  ```
669
651
 
@@ -805,7 +787,7 @@ watch(
805
787
  Consejo: Para un mejor SEO y accesibilidad, use etiquetas como `<a href="/fr/home" hreflang="fr">` para enlazar a páginas localizadas, como se muestra en el Paso 10. Esto permite que los motores de búsqueda descubran e indexen correctamente las URLs específicas por idioma. Para preservar el comportamiento SPA, puede prevenir la navegación predeterminada con @click.prevent, cambiar la configuración regional usando useLocale y navegar programáticamente usando Vue Router.
806
788
 
807
789
  ```html
808
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
790
+ <ol>
809
791
  <li>
810
792
  <a
811
793
  hreflang="x-default"
@@ -18,6 +18,9 @@ slugs:
18
18
  - tanstack-start
19
19
  applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
20
20
  history:
21
+ - version: 7.3.9
22
+ date: 2025-12-05
23
+ changes: Add step 13: Retrieve the locale in your server actions (Optional)
21
24
  - version: 5.8.1
22
25
  date: 2025-09-09
23
26
  changes: Ajout pour Tanstack Start
@@ -536,7 +539,55 @@ export const Route = createFileRoute("/{-$locale}/")({
536
539
 
537
540
  ---
538
541
 
539
- ### Étape 13 : Configurer TypeScript (Optionnel)
542
+ ### Étape 13 : Récupérer la locale dans vos actions serveur (Optionnel)
543
+
544
+ Vous voudrez peut-être accéder à la locale actuelle depuis l'intérieur de vos actions serveur ou points de terminaison API.
545
+ Vous pouvez le faire en utilisant l'assistant `getLocale` de `intlayer`.
546
+
547
+ Voici un exemple utilisant les fonctions serveur de TanStack Start :
548
+
549
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
550
+ import { createServerFn } from "@tanstack/react-start";
551
+ import {
552
+ getRequestHeader,
553
+ getRequestHeaders,
554
+ } from "@tanstack/react-start/server";
555
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
556
+
557
+ export const getLocaleServer = createServerFn().handler(async () => {
558
+ const locale = await getLocale({
559
+ // Récupérer le cookie depuis la requête (défaut : 'INTLAYER_LOCALE')
560
+ getCookie: (name) => {
561
+ const cookieString = getRequestHeader("cookie");
562
+
563
+ return getCookie(name, cookieString);
564
+ },
565
+ // Récupérer l'en-tête depuis la requête (défaut : 'x-intlayer-locale')
566
+ getHeader: (name) => getRequestHeader(name),
567
+ // Repli utilisant la négociation Accept-Language
568
+ getAllHeaders: async () => {
569
+ const headers = getRequestHeaders();
570
+ const result: Record<string, string> = {};
571
+
572
+ // Convertir les TypedHeaders en un simple Record<string, string>
573
+ for (const [key, value] of headers.entries()) {
574
+ result[key] = value;
575
+ }
576
+
577
+ return result;
578
+ },
579
+ });
580
+
581
+ // Récupérer du contenu en utilisant getIntlayer()
582
+ const content = getIntlayer("app", locale);
583
+
584
+ return { locale, content };
585
+ });
586
+ ```
587
+
588
+ ---
589
+
590
+ ### Étape 14 : Configurer TypeScript (Optionnel)
540
591
 
541
592
  Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
542
593
 
@@ -537,53 +537,47 @@ Exemple :
537
537
  Tout d'abord, installez Vue Router :
538
538
 
539
539
  ```bash packageManager="npm"
540
- npm install intlayer vue-router
540
+ npm install vue-router
541
541
  ```
542
542
 
543
543
  ```bash packageManager="pnpm"
544
- pnpm add intlayer vue-router
544
+ pnpm add vue-router
545
545
  ```
546
546
 
547
547
  ```bash packageManager="yarn"
548
- yarn add intlayer vue-router
548
+ yarn add vue-router
549
549
  ```
550
550
 
551
551
  Ensuite, créez une configuration de routeur qui gère le routage basé sur la locale :
552
552
 
553
553
  ```js fileName="src/router/index.ts"
554
554
  import {
555
- configuration,
556
- getPathWithoutLocale,
557
555
  localeFlatMap,
558
- type Locales,
556
+ type Locale,
559
557
  } from 'intlayer';
560
558
  import { createIntlayerClient } from 'vue-intlayer';
561
559
  import { createRouter, createWebHistory } from 'vue-router';
562
560
  import HomeView from './views/home/HomeView.vue';
563
561
  import RootView from './views/root/Root.vue';
564
562
 
565
- // Obtenir la configuration d'internationalisation
566
- const { internationalization, middleware } = configuration;
567
- const { defaultLocale } = internationalization;
568
-
569
563
  /**
570
564
  * Déclarez les routes avec des chemins et des métadonnées spécifiques à la locale.
571
565
  */
572
- const routes = localeFlatMap((localizedData) => [
566
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
573
567
  {
574
- path: `${localizedData.urlPrefix}/`,
575
- name: `Root-${localizedData.locale}`,
568
+ path: `${urlPrefix}/`,
569
+ name: `Root-${locale}`,
576
570
  component: RootView,
577
571
  meta: {
578
- locale: localizedData.locale,
572
+ locale,
579
573
  },
580
574
  },
581
575
  {
582
- path: `${localizedData.urlPrefix}/home`,
583
- name: `Home-${localizedData.locale}`,
576
+ path: `${urlPrefix}/home`,
577
+ name: `Home-${locale}`,
584
578
  component: HomeView,
585
579
  meta: {
586
- locale: localizedData.locale,
580
+ locale,
587
581
  },
588
582
  },
589
583
  ]);
@@ -598,23 +592,11 @@ export const router = createRouter({
598
592
  router.beforeEach((to, _from, next) => {
599
593
  const client = createIntlayerClient();
600
594
 
601
- const metaLocale = to.meta.locale as Locales | undefined;
595
+ const metaLocale = to.meta.locale as Locale;
602
596
 
603
- if (metaLocale) {
604
- // Réutiliser la locale définie dans les métadonnées de la route
605
- client.setLocale(metaLocale);
606
- next();
607
- } else {
608
- // Repli : pas de locale dans les métadonnées, route possiblement non trouvée
609
- // Optionnel : gérer les erreurs 404 ou rediriger vers la locale par défaut
610
- client.setLocale(defaultLocale);
611
-
612
- if (middleware.prefixDefault) {
613
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
614
- } else {
615
- next(getPathWithoutLocale(to.path));
616
- }
617
- }
597
+ // Réutiliser la locale définie dans les métadonnées de la route
598
+ client.setLocale(metaLocale);
599
+ next();
618
600
  });
619
601
  ```
620
602
 
@@ -752,7 +734,7 @@ watch(
752
734
  Astuce : Pour un meilleur SEO et une meilleure accessibilité, utilisez des balises telles que `<a href="/fr/home" hreflang="fr">` pour lier les pages localisées, comme montré à l'étape 10. Cela permet aux moteurs de recherche de découvrir et d'indexer correctement les URL spécifiques à chaque langue. Pour préserver le comportement SPA, vous pouvez empêcher la navigation par défaut avec @click.prevent, changer la locale en utilisant useLocale, et naviguer de manière programmatique avec Vue Router.
753
735
 
754
736
  ```html
755
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
737
+ <ol>
756
738
  <li>
757
739
  <a
758
740
  hreflang="x-default"
@@ -18,6 +18,9 @@ slugs:
18
18
  - tanstack-start
19
19
  applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
20
20
  history:
21
+ - version: 7.3.9
22
+ date: 2025-12-05
23
+ changes: Add step 13: Retrieve the locale in your server actions (Optional)
21
24
  - version: 6.5.2
22
25
  date: 2025-10-03
23
26
  changes: दस्तावेज़ अपडेट
@@ -528,7 +531,55 @@ export const Route = createFileRoute("/{-$locale}/")({
528
531
 
529
532
  ---
530
533
 
531
- ### चरण 13: टाइपस्क्रिप्ट कॉन्फ़िगर करें (वैकल्पिक)
534
+ ### Step 13: Retrieve the locale in your server actions (Optional)
535
+
536
+ You may want to access the current locale from inside your server actions or API endpoints.
537
+ You can do this using the `getLocale` helper from `intlayer`.
538
+
539
+ Here's an example using TanStack Start's server functions:
540
+
541
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
542
+ import { createServerFn } from "@tanstack/react-start";
543
+ import {
544
+ getRequestHeader,
545
+ getRequestHeaders,
546
+ } from "@tanstack/react-start/server";
547
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
548
+
549
+ export const getLocaleServer = createServerFn().handler(async () => {
550
+ const locale = await getLocale({
551
+ // Get the cookie from the request (default: 'INTLAYER_LOCALE')
552
+ getCookie: (name) => {
553
+ const cookieString = getRequestHeader("cookie");
554
+
555
+ return getCookie(name, cookieString);
556
+ },
557
+ // Get the header from the request (default: 'x-intlayer-locale')
558
+ getHeader: (name) => getRequestHeader(name),
559
+ // Fallback using Accept-Language negotiation
560
+ getAllHeaders: async () => {
561
+ const headers = getRequestHeaders();
562
+ const result: Record<string, string> = {};
563
+
564
+ // Convert the TypedHeaders into a plain Record<string, string>
565
+ for (const [key, value] of headers.entries()) {
566
+ result[key] = value;
567
+ }
568
+
569
+ return result;
570
+ },
571
+ });
572
+
573
+ // Retrieve some content using getIntlayer()
574
+ const content = getIntlayer("app", locale);
575
+
576
+ return { locale, content };
577
+ });
578
+ ```
579
+
580
+ ---
581
+
582
+ ### चरण 14: टाइपस्क्रिप्ट कॉन्फ़िगर करें (वैकल्पिक)
532
583
 
533
584
  Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
534
585
 
@@ -545,53 +545,47 @@ Vue एप्लिकेशन में स्थानीयकृत रा
545
545
  सबसे पहले, Vue Router इंस्टॉल करें:
546
546
 
547
547
  ```bash packageManager="npm"
548
- npm install intlayer vue-router
548
+ npm install vue-router
549
549
  ```
550
550
 
551
551
  ```bash packageManager="pnpm"
552
- pnpm add intlayer vue-router
552
+ pnpm add vue-router
553
553
  ```
554
554
 
555
555
  ```bash packageManager="yarn"
556
- yarn add intlayer vue-router
556
+ yarn add vue-router
557
557
  ```
558
558
 
559
559
  फिर, एक राउटर कॉन्फ़िगरेशन बनाएं जो स्थानीय-आधारित रूटिंग को संभालता है:
560
560
 
561
561
  ```js fileName="src/router/index.ts"
562
562
  import {
563
- configuration,
564
- getPathWithoutLocale,
565
563
  localeFlatMap,
566
- type Locales,
564
+ type Locale,
567
565
  } from 'intlayer';
568
566
  import { createIntlayerClient } from 'vue-intlayer';
569
567
  import { createRouter, createWebHistory } from 'vue-router';
570
568
  import HomeView from './views/home/HomeView.vue';
571
569
  import RootView from './views/root/Root.vue';
572
570
 
573
- // अंतरराष्ट्रीयकरण कॉन्फ़िगरेशन प्राप्त करें
574
- const { internationalization, middleware } = configuration;
575
- const { defaultLocale } = internationalization;
576
-
577
571
  /**
578
572
  * स्थानीय-विशिष्ट पथ और मेटाडेटा के साथ रूट्स घोषित करें।
579
573
  */
580
- const routes = localeFlatMap((localizedData) => [
574
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
581
575
  {
582
- path: `${localizedData.urlPrefix}/`,
583
- name: `Root-${localizedData.locale}`,
576
+ path: `${urlPrefix}/`,
577
+ name: `Root-${locale}`,
584
578
  component: RootView,
585
579
  meta: {
586
- locale: localizedData.locale,
580
+ locale,
587
581
  },
588
582
  },
589
583
  {
590
- path: `${localizedData.urlPrefix}/home`,
591
- name: `Home-${localizedData.locale}`,
584
+ path: `${urlPrefix}/home`,
585
+ name: `Home-${locale}`,
592
586
  component: HomeView,
593
587
  meta: {
594
- locale: localizedData.locale,
588
+ locale,
595
589
  },
596
590
  },
597
591
  ]);
@@ -606,23 +600,11 @@ export const router = createRouter({
606
600
  router.beforeEach((to, _from, next) => {
607
601
  const client = createIntlayerClient();
608
602
 
609
- const metaLocale = to.meta.locale as Locales | undefined;
603
+ const metaLocale = to.meta.locale as Locale;
610
604
 
611
- if (metaLocale) {
612
- // रूट मेटा में परिभाषित स्थानीयता का पुन: उपयोग करें
613
- client.setLocale(metaLocale);
614
- next();
615
- } else {
616
- // फॉलबैक: मेटा में कोई स्थानीयता नहीं, संभवतः अनमिलित रूट
617
- // वैकल्पिक: 404 को संभालें या डिफ़ॉल्ट स्थानीयता पर पुनः निर्देशित करें
618
- client.setLocale(defaultLocale);
619
-
620
- if (middleware.prefixDefault) {
621
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
622
- } else {
623
- next(getPathWithoutLocale(to.path));
624
- }
625
- }
605
+ // रूट मेटा में परिभाषित स्थानीयता का पुन: उपयोग करें
606
+ client.setLocale(metaLocale);
607
+ next();
626
608
  });
627
609
  ```
628
610
 
@@ -760,7 +742,7 @@ watch(
760
742
  टिप: बेहतर SEO और पहुँच के लिए, स्थानीयकृत पृष्ठों से लिंक करने के लिए `<a href="/fr/home" hreflang="fr">` जैसे टैग का उपयोग करें, जैसा कि चरण 10 में दिखाया गया है। इससे खोज इंजन भाषा-विशिष्ट URL को सही ढंग से खोज और अनुक्रमित कर सकते हैं। SPA व्यवहार बनाए रखने के लिए, आप @click.prevent के साथ डिफ़ॉल्ट नेविगेशन को रोक सकते हैं, useLocale का उपयोग करके स्थानीयता बदल सकते हैं, और Vue Router का उपयोग करके प्रोग्रामेटिक रूप से नेविगेट कर सकते हैं।
761
743
 
762
744
  ```html
763
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
745
+ <ol>
764
746
  <li>
765
747
  <a
766
748
  hreflang="x-default"
@@ -18,6 +18,9 @@ slugs:
18
18
  - tanstack-start
19
19
  applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-template
20
20
  history:
21
+ - version: 7.3.9
22
+ date: 2025-12-05
23
+ changes: Add step 13: Retrieve the locale in your server actions (Optional)
21
24
  - version: 6.5.2
22
25
  date: 2025-10-03
23
26
  changes: Memperbarui dokumen
@@ -540,7 +543,55 @@ export const Route = createFileRoute("/{-$locale}/")({
540
543
 
541
544
  ---
542
545
 
543
- ### Langkah 13: Konfigurasi TypeScript (Opsional)
546
+ ### Step 13: Retrieve the locale in your server actions (Optional)
547
+
548
+ You may want to access the current locale from inside your server actions or API endpoints.
549
+ You can do this using the `getLocale` helper from `intlayer`.
550
+
551
+ Here's an example using TanStack Start's server functions:
552
+
553
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
554
+ import { createServerFn } from "@tanstack/react-start";
555
+ import {
556
+ getRequestHeader,
557
+ getRequestHeaders,
558
+ } from "@tanstack/react-start/server";
559
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
560
+
561
+ export const getLocaleServer = createServerFn().handler(async () => {
562
+ const locale = await getLocale({
563
+ // Get the cookie from the request (default: 'INTLAYER_LOCALE')
564
+ getCookie: (name) => {
565
+ const cookieString = getRequestHeader("cookie");
566
+
567
+ return getCookie(name, cookieString);
568
+ },
569
+ // Get the header from the request (default: 'x-intlayer-locale')
570
+ getHeader: (name) => getRequestHeader(name),
571
+ // Fallback using Accept-Language negotiation
572
+ getAllHeaders: async () => {
573
+ const headers = getRequestHeaders();
574
+ const result: Record<string, string> = {};
575
+
576
+ // Convert the TypedHeaders into a plain Record<string, string>
577
+ for (const [key, value] of headers.entries()) {
578
+ result[key] = value;
579
+ }
580
+
581
+ return result;
582
+ },
583
+ });
584
+
585
+ // Retrieve some content using getIntlayer()
586
+ const content = getIntlayer("app", locale);
587
+
588
+ return { locale, content };
589
+ });
590
+ ```
591
+
592
+ ---
593
+
594
+ ### Langkah 14: Konfigurasi TypeScript (Opsional)
544
595
 
545
596
  Intlayer menggunakan module augmentation untuk mendapatkan manfaat dari TypeScript dan membuat codebase Anda lebih kuat.
546
597
 
@@ -584,53 +584,47 @@ Contoh:
584
584
  Pertama, instal Vue Router:
585
585
 
586
586
  ```bash packageManager="npm"
587
- npm install intlayer vue-router
587
+ npm install vue-router
588
588
  ```
589
589
 
590
590
  ```bash packageManager="pnpm"
591
- pnpm add intlayer vue-router
591
+ pnpm add vue-router
592
592
  ```
593
593
 
594
594
  ```bash packageManager="yarn"
595
- yarn add intlayer vue-router
595
+ yarn add vue-router
596
596
  ```
597
597
 
598
598
  Lalu, buat konfigurasi router yang menangani routing berbasis locale:
599
599
 
600
600
  ```js fileName="src/router/index.ts"
601
601
  import {
602
- configuration,
603
- getPathWithoutLocale,
604
602
  localeFlatMap,
605
- type Locales,
603
+ type Locale,
606
604
  } from 'intlayer';
607
605
  import { createIntlayerClient } from 'vue-intlayer';
608
606
  import { createRouter, createWebHistory } from 'vue-router';
609
607
  import HomeView from './views/home/HomeView.vue';
610
608
  import RootView from './views/root/Root.vue';
611
609
 
612
- // Mendapatkan konfigurasi internasionalisasi
613
- const { internationalization, middleware } = configuration;
614
- const { defaultLocale } = internationalization;
615
-
616
610
  /**
617
611
  * Mendeklarasikan routes dengan path dan metadata spesifik locale.
618
612
  */
619
- const routes = localeFlatMap((localizedData) => [
613
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
620
614
  {
621
- path: `${localizedData.urlPrefix}/`,
622
- name: `Root-${localizedData.locale}`,
615
+ path: `${urlPrefix}/`,
616
+ name: `Root-${locale}`,
623
617
  component: RootView,
624
618
  meta: {
625
- locale: localizedData.locale,
619
+ locale,
626
620
  },
627
621
  },
628
622
  {
629
- path: `${localizedData.urlPrefix}/home`,
630
- name: `Home-${localizedData.locale}`,
623
+ path: `${urlPrefix}/home`,
624
+ name: `Home-${locale}`,
631
625
  component: HomeView,
632
626
  meta: {
633
- locale: localizedData.locale,
627
+ locale,
634
628
  },
635
629
  },
636
630
  ]);
@@ -645,23 +639,11 @@ export const router = createRouter({
645
639
  router.beforeEach((to, _from, next) => {
646
640
  const client = createIntlayerClient();
647
641
 
648
- const metaLocale = to.meta.locale as Locales | undefined;
642
+ const metaLocale = to.meta.locale as Locale;
649
643
 
650
- if (metaLocale) {
651
- // Gunakan kembali locale yang didefinisikan di meta route
652
- client.setLocale(metaLocale);
653
- next();
654
- } else {
655
- // Cadangan: tidak ada locale di meta, kemungkinan route tidak cocok
656
- // Opsional: tangani 404 atau redirect ke locale default
657
- client.setLocale(defaultLocale);
658
-
659
- if (middleware.prefixDefault) {
660
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
661
- } else {
662
- next(getPathWithoutLocale(to.path));
663
- }
664
- }
644
+ // Gunakan kembali locale yang didefinisikan di meta route
645
+ client.setLocale(metaLocale);
646
+ next();
665
647
  });
666
648
  ```
667
649
 
@@ -793,7 +775,7 @@ watch(
793
775
  Tip: Untuk SEO dan aksesibilitas yang lebih baik, gunakan tag seperti `<a href="/fr/home" hreflang="fr">` untuk menautkan ke halaman yang dilokalkan, seperti yang ditunjukkan pada Langkah 10. Ini memungkinkan mesin pencari menemukan dan mengindeks URL spesifik bahasa dengan benar. Untuk mempertahankan perilaku SPA, Anda dapat mencegah navigasi default dengan @click.prevent, mengubah locale menggunakan useLocale, dan menavigasi secara programatik menggunakan Vue Router.
794
776
 
795
777
  ```html
796
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
778
+ <ol>
797
779
  <li>
798
780
  <a
799
781
  hreflang="x-default"