@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: 6.5.2
22
25
  date: 2025-10-03
23
26
  changes: Aggiornamento documentazione
@@ -549,7 +552,55 @@ export const Route = createFileRoute("/{-$locale}/")({
549
552
 
550
553
  ---
551
554
 
552
- ### Passo 13: Configurare TypeScript (Opzionale)
555
+ ### Passo 13: Recuperare la locale nelle azioni del server (Opzionale)
556
+
557
+ Potresti voler accedere alla locale corrente dall'interno delle tue azioni server o endpoint API.
558
+ Puoi farlo usando l'helper `getLocale` da `intlayer`.
559
+
560
+ Ecco un esempio utilizzando le funzioni server di TanStack Start:
561
+
562
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
563
+ import { createServerFn } from "@tanstack/react-start";
564
+ import {
565
+ getRequestHeader,
566
+ getRequestHeaders,
567
+ } from "@tanstack/react-start/server";
568
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
569
+
570
+ export const getLocaleServer = createServerFn().handler(async () => {
571
+ const locale = await getLocale({
572
+ // Ottieni il cookie dalla richiesta (default: 'INTLAYER_LOCALE')
573
+ getCookie: (name) => {
574
+ const cookieString = getRequestHeader("cookie");
575
+
576
+ return getCookie(name, cookieString);
577
+ },
578
+ // Ottieni l'header dalla richiesta (default: 'x-intlayer-locale')
579
+ getHeader: (name) => getRequestHeader(name),
580
+ // Fallback utilizzando la negoziazione Accept-Language
581
+ getAllHeaders: async () => {
582
+ const headers = getRequestHeaders();
583
+ const result: Record<string, string> = {};
584
+
585
+ // Converti TypedHeaders in un semplice Record<string, string>
586
+ for (const [key, value] of headers.entries()) {
587
+ result[key] = value;
588
+ }
589
+
590
+ return result;
591
+ },
592
+ });
593
+
594
+ // Recupera alcuni contenuti usando getIntlayer()
595
+ const content = getIntlayer("app", locale);
596
+
597
+ return { locale, content };
598
+ });
599
+ ```
600
+
601
+ ---
602
+
603
+ ### Passo 14: Configurare TypeScript (Opzionale)
553
604
 
554
605
  Intlayer utilizza l'augmentation dei moduli per sfruttare i vantaggi di TypeScript e rendere il tuo codice più robusto.
555
606
 
@@ -580,53 +580,47 @@ Esempio:
580
580
  Per prima cosa, installa Vue Router:
581
581
 
582
582
  ```bash packageManager="npm"
583
- npm install intlayer vue-router
583
+ npm install vue-router
584
584
  ```
585
585
 
586
586
  ```bash packageManager="pnpm"
587
- pnpm add intlayer vue-router
587
+ pnpm add vue-router
588
588
  ```
589
589
 
590
590
  ```bash packageManager="yarn"
591
- yarn add intlayer vue-router
591
+ yarn add vue-router
592
592
  ```
593
593
 
594
594
  Quindi, crea una configurazione del router che gestisca il routing basato sulla localizzazione:
595
595
 
596
596
  ```js fileName="src/router/index.ts"
597
597
  import {
598
- configuration,
599
- getPathWithoutLocale,
600
598
  localeFlatMap,
601
- type Locales,
599
+ type Locale,
602
600
  } from 'intlayer';
603
601
  import { createIntlayerClient } from 'vue-intlayer';
604
602
  import { createRouter, createWebHistory } from 'vue-router';
605
603
  import HomeView from './views/home/HomeView.vue';
606
604
  import RootView from './views/root/Root.vue';
607
605
 
608
- // Ottieni la configurazione per l'internazionalizzazione
609
- const { internationalization, middleware } = configuration;
610
- const { defaultLocale } = internationalization;
611
-
612
606
  /**
613
607
  * Dichiara le rotte con percorsi e metadati specifici per la localizzazione.
614
608
  */
615
- const routes = localeFlatMap((localizedData) => [
609
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
616
610
  {
617
- path: `${localizedData.urlPrefix}/`,
618
- name: `Root-${localizedData.locale}`,
611
+ path: `${urlPrefix}/`,
612
+ name: `Root-${locale}`,
619
613
  component: RootView,
620
614
  meta: {
621
- locale: localizedData.locale,
615
+ locale,
622
616
  },
623
617
  },
624
618
  {
625
- path: `${localizedData.urlPrefix}/home`,
626
- name: `Home-${localizedData.locale}`,
619
+ path: `${urlPrefix}/home`,
620
+ name: `Home-${locale}`,
627
621
  component: HomeView,
628
622
  meta: {
629
- locale: localizedData.locale,
623
+ locale,
630
624
  },
631
625
  },
632
626
  ]);
@@ -641,23 +635,11 @@ export const router = createRouter({
641
635
  router.beforeEach((to, _from, next) => {
642
636
  const client = createIntlayerClient();
643
637
 
644
- const metaLocale = to.meta.locale as Locales | undefined;
638
+ const metaLocale = to.meta.locale as Locale;
645
639
 
646
- if (metaLocale) {
647
- // Riutilizza la localizzazione definita nei meta della rotta
648
- client.setLocale(metaLocale);
649
- next();
650
- } else {
651
- // Fallback: nessuna localizzazione nei meta, possibile rotta non corrispondente
652
- // Opzionale: gestire il 404 o reindirizzare alla lingua predefinita
653
- client.setLocale(defaultLocale);
654
-
655
- if (middleware.prefixDefault) {
656
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
657
- } else {
658
- next(getPathWithoutLocale(to.path));
659
- }
660
- }
640
+ // Riutilizza la localizzazione definita nei meta della rotta
641
+ client.setLocale(metaLocale);
642
+ next();
661
643
  });
662
644
  ```
663
645
 
@@ -795,7 +777,7 @@ watch(
795
777
  Suggerimento: Per una migliore SEO e accessibilità, usa tag come `<a href="/fr/home" hreflang="fr">` per collegarti alle pagine localizzate, come mostrato nel Passo 10. Questo permette ai motori di ricerca di scoprire e indicizzare correttamente gli URL specifici per lingua. Per preservare il comportamento SPA, puoi prevenire la navigazione predefinita con @click.prevent, cambiare la localizzazione usando useLocale e navigare programmaticamente con Vue Router.
796
778
 
797
779
  ```html
798
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
780
+ <ol>
799
781
  <li>
800
782
  <a
801
783
  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: Tanstack Start 用に追加
@@ -532,7 +535,55 @@ export const Route = createFileRoute("/{-$locale}/")({
532
535
 
533
536
  ---
534
537
 
535
- ### ステップ13: TypeScriptの設定(任意)
538
+ ### Step 13: Retrieve the locale in your server actions (Optional)
539
+
540
+ You may want to access the current locale from inside your server actions or API endpoints.
541
+ You can do this using the `getLocale` helper from `intlayer`.
542
+
543
+ Here's an example using TanStack Start's server functions:
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
+ // Get the cookie from the request (default: 'INTLAYER_LOCALE')
556
+ getCookie: (name) => {
557
+ const cookieString = getRequestHeader("cookie");
558
+
559
+ return getCookie(name, cookieString);
560
+ },
561
+ // Get the header from the request (default: 'x-intlayer-locale')
562
+ getHeader: (name) => getRequestHeader(name),
563
+ // Fallback using Accept-Language negotiation
564
+ getAllHeaders: async () => {
565
+ const headers = getRequestHeaders();
566
+ const result: Record<string, string> = {};
567
+
568
+ // Convert the TypedHeaders into a plain Record<string, string>
569
+ for (const [key, value] of headers.entries()) {
570
+ result[key] = value;
571
+ }
572
+
573
+ return result;
574
+ },
575
+ });
576
+
577
+ // Retrieve some content using getIntlayer()
578
+ const content = getIntlayer("app", locale);
579
+
580
+ return { locale, content };
581
+ });
582
+ ```
583
+
584
+ ---
585
+
586
+ ### ステップ14: TypeScriptの設定(任意)
536
587
 
537
588
  Intlayerはモジュール拡張を使用して、TypeScriptの利点を活かし、コードベースを強化します。
538
589
 
@@ -570,53 +570,47 @@ Vueアプリケーションにローカライズされたルーティングを
570
570
  まず、Vue Routerをインストールします:
571
571
 
572
572
  ```bash packageManager="npm"
573
- npm install intlayer vue-router
573
+ npm install vue-router
574
574
  ```
575
575
 
576
576
  ```bash packageManager="pnpm"
577
- pnpm add intlayer vue-router
577
+ pnpm add vue-router
578
578
  ```
579
579
 
580
580
  ```bash packageManager="yarn"
581
- yarn add intlayer vue-router
581
+ yarn add vue-router
582
582
  ```
583
583
 
584
584
  次に、ロケールベースのルーティングを処理するルーター設定を作成します:
585
585
 
586
586
  ```js fileName="src/router/index.ts"
587
587
  import {
588
- configuration,
589
- getPathWithoutLocale,
590
588
  localeFlatMap,
591
- type Locales,
589
+ type Locale,
592
590
  } from 'intlayer';
593
591
  import { createIntlayerClient } from 'vue-intlayer';
594
592
  import { createRouter, createWebHistory } from 'vue-router';
595
593
  import HomeView from './views/home/HomeView.vue';
596
594
  import RootView from './views/root/Root.vue';
597
595
 
598
- // 国際化設定を取得
599
- const { internationalization, middleware } = configuration;
600
- const { defaultLocale } = internationalization;
601
-
602
596
  /**
603
597
  * ロケール固有のパスとメタデータを持つルートを宣言します。
604
598
  */
605
- const routes = localeFlatMap((localizedData) => [
599
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
606
600
  {
607
- path: `${localizedData.urlPrefix}/`,
608
- name: `Root-${localizedData.locale}`,
601
+ path: `${urlPrefix}/`,
602
+ name: `Root-${locale}`,
609
603
  component: RootView,
610
604
  meta: {
611
- locale: localizedData.locale,
605
+ locale,
612
606
  },
613
607
  },
614
608
  {
615
- path: `${localizedData.urlPrefix}/home`,
616
- name: `Home-${localizedData.locale}`,
609
+ path: `${urlPrefix}/home`,
610
+ name: `Home-${locale}`,
617
611
  component: HomeView,
618
612
  meta: {
619
- locale: localizedData.locale,
613
+ locale,
620
614
  },
621
615
  },
622
616
  ]);
@@ -631,23 +625,11 @@ export const router = createRouter({
631
625
  router.beforeEach((to, _from, next) => {
632
626
  const client = createIntlayerClient();
633
627
 
634
- const metaLocale = to.meta.locale as Locales | undefined;
628
+ const metaLocale = to.meta.locale as Locale;
635
629
 
636
- if (metaLocale) {
637
- // ルートのメタに定義されたロケールを再利用
638
- client.setLocale(metaLocale);
639
- next();
640
- } else {
641
- // フォールバック: メタにロケールがない場合、おそらく一致しないルート
642
- // オプション: 404を処理するか、デフォルトのロケールにリダイレクトする
643
- client.setLocale(defaultLocale);
644
-
645
- if (middleware.prefixDefault) {
646
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
647
- } else {
648
- next(getPathWithoutLocale(to.path));
649
- }
650
- }
630
+ // ルートのメタに定義されたロケールを再利用
631
+ client.setLocale(metaLocale);
632
+ next();
651
633
  });
652
634
  ```
653
635
 
@@ -785,7 +767,7 @@ watch(
785
767
  ヒント: SEOとアクセシビリティを向上させるために、ステップ10で示したように、ローカライズされたページへのリンクには `<a href="/fr/home" hreflang="fr">` のようなタグを使用してください。これにより、検索エンジンは言語別のURLを正しく検出しインデックス化できます。SPAの動作を維持するためには、@click.preventでデフォルトのナビゲーションを防止し、useLocaleでロケールを変更し、Vue Routerを使ってプログラム的にナビゲートすることが可能です。
786
768
 
787
769
  ```html
788
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
770
+ <ol>
789
771
  <li>
790
772
  <a
791
773
  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: Tanstack Start용 추가
@@ -537,7 +540,55 @@ export const Route = createFileRoute("/{-$locale}/")({
537
540
 
538
541
  ---
539
542
 
540
- ### 13단계: TypeScript 구성 (선택 사항)
543
+ ### Step 13: Retrieve the locale in your server actions (Optional)
544
+
545
+ You may want to access the current locale from inside your server actions or API endpoints.
546
+ You can do this using the `getLocale` helper from `intlayer`.
547
+
548
+ Here's an example using TanStack Start's server functions:
549
+
550
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
551
+ import { createServerFn } from "@tanstack/react-start";
552
+ import {
553
+ getRequestHeader,
554
+ getRequestHeaders,
555
+ } from "@tanstack/react-start/server";
556
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
557
+
558
+ export const getLocaleServer = createServerFn().handler(async () => {
559
+ const locale = await getLocale({
560
+ // Get the cookie from the request (default: 'INTLAYER_LOCALE')
561
+ getCookie: (name) => {
562
+ const cookieString = getRequestHeader("cookie");
563
+
564
+ return getCookie(name, cookieString);
565
+ },
566
+ // Get the header from the request (default: 'x-intlayer-locale')
567
+ getHeader: (name) => getRequestHeader(name),
568
+ // Fallback using Accept-Language negotiation
569
+ getAllHeaders: async () => {
570
+ const headers = getRequestHeaders();
571
+ const result: Record<string, string> = {};
572
+
573
+ // Convert the TypedHeaders into a plain Record<string, string>
574
+ for (const [key, value] of headers.entries()) {
575
+ result[key] = value;
576
+ }
577
+
578
+ return result;
579
+ },
580
+ });
581
+
582
+ // Retrieve some content using getIntlayer()
583
+ const content = getIntlayer("app", locale);
584
+
585
+ return { locale, content };
586
+ });
587
+ ```
588
+
589
+ ---
590
+
591
+ ### 14단계: TypeScript 구성 (선택 사항)
541
592
 
542
593
  Intlayer는 모듈 확장을 사용하여 TypeScript의 이점을 활용하고 코드베이스를 더욱 견고하게 만듭니다.
543
594
 
@@ -574,53 +574,47 @@ Vue 애플리케이션에 지역화된 라우팅을 추가하는 것은 일반
574
574
  먼저, Vue Router를 설치하세요:
575
575
 
576
576
  ```bash packageManager="npm"
577
- npm install intlayer vue-router
577
+ npm install vue-router
578
578
  ```
579
579
 
580
580
  ```bash packageManager="pnpm"
581
- pnpm add intlayer vue-router
581
+ pnpm add vue-router
582
582
  ```
583
583
 
584
584
  ```bash packageManager="yarn"
585
- yarn add intlayer vue-router
585
+ yarn add vue-router
586
586
  ```
587
587
 
588
588
  그런 다음, 로케일 기반 라우팅을 처리하는 라우터 구성을 만듭니다:
589
589
 
590
590
  ```js fileName="src/router/index.ts"
591
591
  import {
592
- configuration,
593
- getPathWithoutLocale,
594
592
  localeFlatMap,
595
- type Locales,
593
+ type Locale,
596
594
  } from 'intlayer';
597
595
  import { createIntlayerClient } from 'vue-intlayer';
598
596
  import { createRouter, createWebHistory } from 'vue-router';
599
597
  import HomeView from './views/home/HomeView.vue';
600
598
  import RootView from './views/root/Root.vue';
601
599
 
602
- // 국제화 구성 가져오기
603
- const { internationalization, middleware } = configuration;
604
- const { defaultLocale } = internationalization;
605
-
606
600
  /**
607
601
  * 로케일별 경로와 메타데이터를 가진 라우트를 선언합니다.
608
602
  */
609
- const routes = localeFlatMap((localizedData) => [
603
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
610
604
  {
611
- path: `${localizedData.urlPrefix}/`,
612
- name: `Root-${localizedData.locale}`,
605
+ path: `${urlPrefix}/`,
606
+ name: `Root-${locale}`,
613
607
  component: RootView,
614
608
  meta: {
615
- locale: localizedData.locale,
609
+ locale,
616
610
  },
617
611
  },
618
612
  {
619
- path: `${localizedData.urlPrefix}/home`,
620
- name: `Home-${localizedData.locale}`,
613
+ path: `${urlPrefix}/home`,
614
+ name: `Home-${locale}`,
621
615
  component: HomeView,
622
616
  meta: {
623
- locale: localizedData.locale,
617
+ locale,
624
618
  },
625
619
  },
626
620
  ]);
@@ -635,23 +629,11 @@ export const router = createRouter({
635
629
  router.beforeEach((to, _from, next) => {
636
630
  const client = createIntlayerClient();
637
631
 
638
- const metaLocale = to.meta.locale as Locales | undefined;
632
+ const metaLocale = to.meta.locale as Locale;
639
633
 
640
- if (metaLocale) {
641
- // 라우트 메타에 정의된 로케일 재사용
642
- client.setLocale(metaLocale);
643
- next();
644
- } else {
645
- // 대체 처리: 메타에 로케일이 없거나, 일치하지 않는 라우트일 가능성
646
- // 선택 사항: 404 처리 또는 기본 로케일로 리디렉션
647
- client.setLocale(defaultLocale);
648
-
649
- if (middleware.prefixDefault) {
650
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
651
- } else {
652
- next(getPathWithoutLocale(to.path));
653
- }
654
- }
634
+ // 라우트 메타에 정의된 로케일 재사용
635
+ client.setLocale(metaLocale);
636
+ next();
655
637
  });
656
638
  ```
657
639
 
@@ -789,7 +771,7 @@ watch(
789
771
  팁: 더 나은 SEO 및 접근성을 위해, 10단계에서 보여준 것처럼 `<a href="/fr/home" hreflang="fr">`와 같은 태그를 사용하여 지역화된 페이지에 링크하세요. 이렇게 하면 검색 엔진이 언어별 URL을 올바르게 발견하고 색인화할 수 있습니다. SPA 동작을 유지하려면 @click.prevent로 기본 내비게이션을 방지하고, useLocale을 사용해 로케일을 변경하며, Vue Router를 통해 프로그래밍 방식으로 이동할 수 있습니다.
790
772
 
791
773
  ```html
792
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
774
+ <ol>
793
775
  <li>
794
776
  <a
795
777
  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: Aktualizacja dokumentacji
@@ -538,7 +541,55 @@ export const Route = createFileRoute("/{-$locale}/")({
538
541
 
539
542
  ---
540
543
 
541
- ### Krok 13: Konfiguracja TypeScript (opcjonalnie)
544
+ ### Step 13: Retrieve the locale in your server actions (Optional)
545
+
546
+ You may want to access the current locale from inside your server actions or API endpoints.
547
+ You can do this using the `getLocale` helper from `intlayer`.
548
+
549
+ Here's an example using TanStack Start's server functions:
550
+
551
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
552
+ import { createServerFn } from "@tanstack/react-start";
553
+ import {
554
+ getRequestHeader,
555
+ getRequestHeaders,
556
+ } from "@tanstack/react-start/server";
557
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
558
+
559
+ export const getLocaleServer = createServerFn().handler(async () => {
560
+ const locale = await getLocale({
561
+ // Get the cookie from the request (default: 'INTLAYER_LOCALE')
562
+ getCookie: (name) => {
563
+ const cookieString = getRequestHeader("cookie");
564
+
565
+ return getCookie(name, cookieString);
566
+ },
567
+ // Get the header from the request (default: 'x-intlayer-locale')
568
+ getHeader: (name) => getRequestHeader(name),
569
+ // Fallback using Accept-Language negotiation
570
+ getAllHeaders: async () => {
571
+ const headers = getRequestHeaders();
572
+ const result: Record<string, string> = {};
573
+
574
+ // Convert the TypedHeaders into a plain Record<string, string>
575
+ for (const [key, value] of headers.entries()) {
576
+ result[key] = value;
577
+ }
578
+
579
+ return result;
580
+ },
581
+ });
582
+
583
+ // Retrieve some content using getIntlayer()
584
+ const content = getIntlayer("app", locale);
585
+
586
+ return { locale, content };
587
+ });
588
+ ```
589
+
590
+ ---
591
+
592
+ ### Krok 14: Konfiguracja TypeScript (opcjonalnie)
542
593
 
543
594
  Intlayer używa rozszerzenia modułów (module augmentation), aby wykorzystać zalety TypeScript i wzmocnić Twoją bazę kodu.
544
595
 
@@ -590,53 +590,47 @@ Przykład:
590
590
  Najpierw zainstaluj Vue Router:
591
591
 
592
592
  ```bash packageManager="npm"
593
- npm install intlayer vue-router
593
+ npm install vue-router
594
594
  ```
595
595
 
596
596
  ```bash packageManager="pnpm"
597
- pnpm add intlayer vue-router
597
+ pnpm add vue-router
598
598
  ```
599
599
 
600
600
  ```bash packageManager="yarn"
601
- yarn add intlayer vue-router
601
+ yarn add vue-router
602
602
  ```
603
603
 
604
604
  Następnie utwórz konfigurację routera, która obsługuje routing oparty na lokalizacji:
605
605
 
606
606
  ```js fileName="src/router/index.ts"
607
607
  import {
608
- configuration,
609
- getPathWithoutLocale,
610
608
  localeFlatMap,
611
- type Locales,
609
+ type Locale,
612
610
  } from 'intlayer';
613
611
  import { createIntlayerClient } from 'vue-intlayer';
614
612
  import { createRouter, createWebHistory } from 'vue-router';
615
613
  import HomeView from './views/home/HomeView.vue';
616
614
  import RootView from './views/root/Root.vue';
617
615
 
618
- // Pobierz konfigurację internacjonalizacji
619
- const { internationalization, middleware } = configuration;
620
- const { defaultLocale } = internationalization;
621
-
622
616
  /**
623
617
  * Zadeklaruj trasy z lokalizowanymi ścieżkami i metadanymi.
624
618
  */
625
- const routes = localeFlatMap((localizedData) => [
619
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
626
620
  {
627
- path: `${localizedData.urlPrefix}/`,
628
- name: `Root-${localizedData.locale}`,
621
+ path: `${urlPrefix}/`,
622
+ name: `Root-${locale}`,
629
623
  component: RootView,
630
624
  meta: {
631
- locale: localizedData.locale,
625
+ locale,
632
626
  },
633
627
  },
634
628
  {
635
- path: `${localizedData.urlPrefix}/home`,
636
- name: `Home-${localizedData.locale}`,
629
+ path: `${urlPrefix}/home`,
630
+ name: `Home-${locale}`,
637
631
  component: HomeView,
638
632
  meta: {
639
- locale: localizedData.locale,
633
+ locale,
640
634
  },
641
635
  },
642
636
  ]);
@@ -651,23 +645,11 @@ export const router = createRouter({
651
645
  router.beforeEach((to, _from, next) => {
652
646
  const client = createIntlayerClient();
653
647
 
654
- const metaLocale = to.meta.locale as Locales | undefined;
648
+ const metaLocale = to.meta.locale as Locale;
655
649
 
656
- if (metaLocale) {
657
- // Ponowne użycie lokalizacji zdefiniowanej w meta trasy
658
- client.setLocale(metaLocale);
659
- next();
660
- } else {
661
- // Domyślne zachowanie: brak lokalizacji w meta, możliwa nieznaleziona trasa
662
- // Opcjonalnie: obsłuż 404 lub przekieruj do domyślnej lokalizacji
663
- client.setLocale(defaultLocale);
664
-
665
- if (middleware.prefixDefault) {
666
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
667
- } else {
668
- next(getPathWithoutLocale(to.path));
669
- }
670
- }
650
+ // Ponowne użycie lokalizacji zdefiniowanej w meta trasy
651
+ client.setLocale(metaLocale);
652
+ next();
671
653
  });
672
654
  ```
673
655
 
@@ -799,7 +781,7 @@ watch(
799
781
  Wskazówka: Dla lepszego SEO i dostępności używaj tagów takich jak `<a href="/fr/home" hreflang="fr">` do linkowania do stron zlokalizowanych, jak pokazano w Kroku 10. Pozwala to wyszukiwarkom na prawidłowe wykrywanie i indeksowanie adresów URL specyficznych dla języka. Aby zachować zachowanie SPA, możesz zapobiec domyślnej nawigacji za pomocą @click.prevent, zmienić lokalizację używając useLocale oraz programowo nawigować za pomocą Vue Router.
800
782
 
801
783
  ```html
802
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
784
+ <ol>
803
785
  <li>
804
786
  <a
805
787
  hreflang="x-default"