@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: Adicionado para Tanstack Start
@@ -539,7 +542,55 @@ export const Route = createFileRoute("/{-$locale}/")({
539
542
 
540
543
  ---
541
544
 
542
- ### Passo 13: Configurar o TypeScript (Opcional)
545
+ ### Passo 13: Recuperar a localidade em suas ações do servidor (Opcional)
546
+
547
+ Você pode querer acessar a localidade atual de dentro de suas ações do servidor ou endpoints de API.
548
+ Você pode fazer isso usando o auxiliar `getLocale` de `intlayer`.
549
+
550
+ Aqui está um exemplo usando as funções de servidor do TanStack Start:
551
+
552
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
553
+ import { createServerFn } from "@tanstack/react-start";
554
+ import {
555
+ getRequestHeader,
556
+ getRequestHeaders,
557
+ } from "@tanstack/react-start/server";
558
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
559
+
560
+ export const getLocaleServer = createServerFn().handler(async () => {
561
+ const locale = await getLocale({
562
+ // Obtenha o cookie da solicitação (padrão: 'INTLAYER_LOCALE')
563
+ getCookie: (name) => {
564
+ const cookieString = getRequestHeader("cookie");
565
+
566
+ return getCookie(name, cookieString);
567
+ },
568
+ // Obtenha o cabeçalho da solicitação (padrão: 'x-intlayer-locale')
569
+ getHeader: (name) => getRequestHeader(name),
570
+ // Fallback usando negociação Accept-Language
571
+ getAllHeaders: async () => {
572
+ const headers = getRequestHeaders();
573
+ const result: Record<string, string> = {};
574
+
575
+ // Converta o TypedHeaders em um Record<string, string> simples
576
+ for (const [key, value] of headers.entries()) {
577
+ result[key] = value;
578
+ }
579
+
580
+ return result;
581
+ },
582
+ });
583
+
584
+ // Recupere algum conteúdo usando getIntlayer()
585
+ const content = getIntlayer("app", locale);
586
+
587
+ return { locale, content };
588
+ });
589
+ ```
590
+
591
+ ---
592
+
593
+ ### Passo 14: Configurar o TypeScript (Opcional)
543
594
 
544
595
  O Intlayer utiliza a ampliação de módulos para aproveitar os benefícios do TypeScript e fortalecer sua base de código.
545
596
 
@@ -559,53 +559,47 @@ Exemplo:
559
559
  Primeiro, instale o Vue Router:
560
560
 
561
561
  ```bash packageManager="npm"
562
- npm install intlayer vue-router
562
+ npm install vue-router
563
563
  ```
564
564
 
565
565
  ```bash packageManager="pnpm"
566
- pnpm add intlayer vue-router
566
+ pnpm add vue-router
567
567
  ```
568
568
 
569
569
  ```bash packageManager="yarn"
570
- yarn add intlayer vue-router
570
+ yarn add vue-router
571
571
  ```
572
572
 
573
573
  Então, crie uma configuração de roteador que lide com o roteamento baseado em localidade:
574
574
 
575
575
  ```js fileName="src/router/index.ts"
576
576
  import {
577
- configuration,
578
- getPathWithoutLocale,
579
577
  localeFlatMap,
580
- type Locales,
578
+ type Locale,
581
579
  } from 'intlayer';
582
580
  import { createIntlayerClient } from 'vue-intlayer';
583
581
  import { createRouter, createWebHistory } from 'vue-router';
584
582
  import HomeView from './views/home/HomeView.vue';
585
583
  import RootView from './views/root/Root.vue';
586
584
 
587
- // Obter a configuração de internacionalização
588
- const { internationalization, middleware } = configuration;
589
- const { defaultLocale } = internationalization;
590
-
591
585
  /**
592
586
  * Declarar as rotas com caminhos e metadados específicos para cada localidade.
593
587
  */
594
- const routes = localeFlatMap((localizedData) => [
588
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
595
589
  {
596
- path: `${localizedData.urlPrefix}/`,
597
- name: `Root-${localizedData.locale}`,
590
+ path: `${urlPrefix}/`,
591
+ name: `Root-${locale}`,
598
592
  component: RootView,
599
593
  meta: {
600
- locale: localizedData.locale,
594
+ locale,
601
595
  },
602
596
  },
603
597
  {
604
- path: `${localizedData.urlPrefix}/home`,
605
- name: `Home-${localizedData.locale}`,
598
+ path: `${urlPrefix}/home`,
599
+ name: `Home-${locale}`,
606
600
  component: HomeView,
607
601
  meta: {
608
- locale: localizedData.locale,
602
+ locale,
609
603
  },
610
604
  },
611
605
  ]);
@@ -620,23 +614,11 @@ export const router = createRouter({
620
614
  router.beforeEach((to, _from, next) => {
621
615
  const client = createIntlayerClient();
622
616
 
623
- const metaLocale = to.meta.locale as Locales | undefined;
617
+ const metaLocale = to.meta.locale as Locale;
624
618
 
625
- if (metaLocale) {
626
- // Reutilizar a localidade definida no meta da rota
627
- client.setLocale(metaLocale);
628
- next();
629
- } else {
630
- // Fallback: sem localidade no meta, possivelmente rota não encontrada
631
- // Opcional: tratar 404 ou redirecionar para o locale padrão
632
- client.setLocale(defaultLocale);
633
-
634
- if (middleware.prefixDefault) {
635
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
636
- } else {
637
- next(getPathWithoutLocale(to.path));
638
- }
639
- }
619
+ // Reutilizar a localidade definida no meta da rota
620
+ client.setLocale(metaLocale);
621
+ next();
640
622
  });
641
623
  ```
642
624
 
@@ -778,7 +760,7 @@ watch(
778
760
  Dica: Para melhor SEO e acessibilidade, use tags como `<a href="/fr/home" hreflang="fr">` para vincular às páginas localizadas, como mostrado no Passo 10. Isso permite que os motores de busca descubram e indexem corretamente URLs específicas de idioma. Para preservar o comportamento SPA, você pode impedir a navegação padrão com @click.prevent, alterar o locale usando useLocale e navegar programaticamente usando o Vue Router.
779
761
 
780
762
  ```html
781
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
763
+ <ol>
782
764
  <li>
783
765
  <a
784
766
  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
@@ -529,7 +532,55 @@ export const Route = createFileRoute("/{-$locale}/")({
529
532
 
530
533
  ---
531
534
 
532
- ### Шаг 13: Настройка TypeScript (необязательно)
535
+ ### Шаг 13: Получение локали в серверных действиях (необязательно)
536
+
537
+ Вы можете захотеть получить доступ к текущей локали внутри ваших серверных действий или конечных точек API.
538
+ Вы можете сделать это с помощью помощника `getLocale` из `intlayer`.
539
+
540
+ Вот пример использования серверных функций TanStack Start:
541
+
542
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
543
+ import { createServerFn } from "@tanstack/react-start";
544
+ import {
545
+ getRequestHeader,
546
+ getRequestHeaders,
547
+ } from "@tanstack/react-start/server";
548
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
549
+
550
+ export const getLocaleServer = createServerFn().handler(async () => {
551
+ const locale = await getLocale({
552
+ // Получить cookie из запроса (по умолчанию: 'INTLAYER_LOCALE')
553
+ getCookie: (name) => {
554
+ const cookieString = getRequestHeader("cookie");
555
+
556
+ return getCookie(name, cookieString);
557
+ },
558
+ // Получить заголовок из запроса (по умолчанию: 'x-intlayer-locale')
559
+ getHeader: (name) => getRequestHeader(name),
560
+ // Резервный вариант с использованием согласования Accept-Language
561
+ getAllHeaders: async () => {
562
+ const headers = getRequestHeaders();
563
+ const result: Record<string, string> = {};
564
+
565
+ // Преобразовать TypedHeaders в простой Record<string, string>
566
+ for (const [key, value] of headers.entries()) {
567
+ result[key] = value;
568
+ }
569
+
570
+ return result;
571
+ },
572
+ });
573
+
574
+ // Получить контент с помощью getIntlayer()
575
+ const content = getIntlayer("app", locale);
576
+
577
+ return { locale, content };
578
+ });
579
+ ```
580
+
581
+ ---
582
+
583
+ ### Шаг 14: Настройка TypeScript (необязательно)
533
584
 
534
585
  Intlayer использует расширение модулей (module augmentation), чтобы использовать преимущества TypeScript и сделать вашу кодовую базу более надежной.
535
586
 
@@ -562,53 +562,47 @@ const content = useIntlayer("app"); // Создайте связанный фа
562
562
  Сначала установите Vue Router:
563
563
 
564
564
  ```bash packageManager="npm"
565
- npm install intlayer vue-router
565
+ npm install vue-router
566
566
  ```
567
567
 
568
568
  ```bash packageManager="pnpm"
569
- pnpm add intlayer vue-router
569
+ pnpm add vue-router
570
570
  ```
571
571
 
572
572
  ```bash packageManager="yarn"
573
- yarn add intlayer vue-router
573
+ yarn add vue-router
574
574
  ```
575
575
 
576
576
  Затем создайте конфигурацию роутера, которая обрабатывает маршрутизацию на основе локали:
577
577
 
578
578
  ```js fileName="src/router/index.ts"
579
579
  import {
580
- configuration,
581
- getPathWithoutLocale,
582
580
  localeFlatMap,
583
- type Locales,
581
+ type Locale,
584
582
  } from 'intlayer';
585
583
  import { createIntlayerClient } from 'vue-intlayer';
586
584
  import { createRouter, createWebHistory } from 'vue-router';
587
585
  import HomeView from './views/home/HomeView.vue';
588
586
  import RootView from './views/root/Root.vue';
589
587
 
590
- // Получить конфигурацию интернационализации
591
- const { internationalization, middleware } = configuration;
592
- const { defaultLocale } = internationalization;
593
-
594
588
  /**
595
589
  * Объявить маршруты с путями и метаданными, специфичными для локали.
596
590
  */
597
- const routes = localeFlatMap((localizedData) => [
591
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
598
592
  {
599
- path: `${localizedData.urlPrefix}/`,
600
- name: `Root-${localizedData.locale}`,
593
+ path: `${urlPrefix}/`,
594
+ name: `Root-${locale}`,
601
595
  component: RootView,
602
596
  meta: {
603
- locale: localizedData.locale,
597
+ locale,
604
598
  },
605
599
  },
606
600
  {
607
- path: `${localizedData.urlPrefix}/home`,
608
- name: `Home-${localizedData.locale}`,
601
+ path: `${urlPrefix}/home`,
602
+ name: `Home-${locale}`,
609
603
  component: HomeView,
610
604
  meta: {
611
- locale: localizedData.locale,
605
+ locale,
612
606
  },
613
607
  },
614
608
  ]);
@@ -623,23 +617,11 @@ export const router = createRouter({
623
617
  router.beforeEach((to, _from, next) => {
624
618
  const client = createIntlayerClient();
625
619
 
626
- const metaLocale = to.meta.locale as Locales | undefined;
620
+ const metaLocale = to.meta.locale as Locale;
627
621
 
628
- if (metaLocale) {
629
- // Используем локаль, определённую в метаданных маршрута
630
- client.setLocale(metaLocale);
631
- next();
632
- } else {
633
- // Запасной вариант: локаль в метаданных отсутствует, возможно, маршрут не найден
634
- // Необязательно: обработка 404 или перенаправление на локаль по умолчанию
635
- client.setLocale(defaultLocale);
636
-
637
- if (middleware.prefixDefault) {
638
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
639
- } else {
640
- next(getPathWithoutLocale(to.path));
641
- }
642
- }
622
+ // Используем локаль, определённую в метаданных маршрута
623
+ client.setLocale(metaLocale);
624
+ next();
643
625
  });
644
626
  ```
645
627
 
@@ -779,7 +761,7 @@ watch(
779
761
  Совет: Для лучшей SEO и доступности используйте теги вида `<a href="/fr/home" hreflang="fr">` для ссылок на локализованные страницы, как показано в Шаге 10. Это позволяет поисковым системам правильно обнаруживать и индексировать URL-адреса, специфичные для языка. Чтобы сохранить поведение SPA, вы можете предотвратить стандартную навигацию с помощью @click.prevent, изменить локаль с помощью useLocale и программно перейти с помощью Vue Router.
780
762
 
781
763
  ```html
782
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
764
+ <ol>
783
765
  <li>
784
766
  <a
785
767
  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: Doküman güncellemesi
@@ -542,7 +545,55 @@ export const Route = createFileRoute("/{-$locale}/")({
542
545
 
543
546
  ---
544
547
 
545
- ### Adım 13: TypeScript Yapılandırması (İsteğe Bağlı)
548
+ ### Step 13: Retrieve the locale in your server actions (Optional)
549
+
550
+ You may want to access the current locale from inside your server actions or API endpoints.
551
+ You can do this using the `getLocale` helper from `intlayer`.
552
+
553
+ Here's an example using TanStack Start's server functions:
554
+
555
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
556
+ import { createServerFn } from "@tanstack/react-start";
557
+ import {
558
+ getRequestHeader,
559
+ getRequestHeaders,
560
+ } from "@tanstack/react-start/server";
561
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
562
+
563
+ export const getLocaleServer = createServerFn().handler(async () => {
564
+ const locale = await getLocale({
565
+ // Get the cookie from the request (default: 'INTLAYER_LOCALE')
566
+ getCookie: (name) => {
567
+ const cookieString = getRequestHeader("cookie");
568
+
569
+ return getCookie(name, cookieString);
570
+ },
571
+ // Get the header from the request (default: 'x-intlayer-locale')
572
+ getHeader: (name) => getRequestHeader(name),
573
+ // Fallback using Accept-Language negotiation
574
+ getAllHeaders: async () => {
575
+ const headers = getRequestHeaders();
576
+ const result: Record<string, string> = {};
577
+
578
+ // Convert the TypedHeaders into a plain Record<string, string>
579
+ for (const [key, value] of headers.entries()) {
580
+ result[key] = value;
581
+ }
582
+
583
+ return result;
584
+ },
585
+ });
586
+
587
+ // Retrieve some content using getIntlayer()
588
+ const content = getIntlayer("app", locale);
589
+
590
+ return { locale, content };
591
+ });
592
+ ```
593
+
594
+ ---
595
+
596
+ ### Adım 14: TypeScript Yapılandırması (İsteğe Bağlı)
546
597
 
547
598
  Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.
548
599
 
@@ -533,53 +533,47 @@ Vue uygulamasında yerelleştirilmiş yönlendirme eklemek genellikle yerel ayar
533
533
  Öncelikle Vue Router'ı kurun:
534
534
 
535
535
  ```bash packageManager="npm"
536
- npm install intlayer vue-router
536
+ npm install vue-router
537
537
  ```
538
538
 
539
539
  ```bash packageManager="pnpm"
540
- pnpm add intlayer vue-router
540
+ pnpm add vue-router
541
541
  ```
542
542
 
543
543
  ```bash packageManager="yarn"
544
- yarn add intlayer vue-router
544
+ yarn add vue-router
545
545
  ```
546
546
 
547
547
  Ardından, yerel ayar tabanlı yönlendirmeyi yöneten bir yönlendirici yapılandırması oluşturun:
548
548
 
549
549
  ```js fileName="src/router/index.ts"
550
550
  import {
551
- configuration,
552
- getPathWithoutLocale,
553
551
  localeFlatMap,
554
- type Locales,
552
+ type Locale,
555
553
  } from 'intlayer';
556
554
  import { createIntlayerClient } from 'vue-intlayer';
557
555
  import { createRouter, createWebHistory } from 'vue-router';
558
556
  import HomeView from './views/home/HomeView.vue';
559
557
  import RootView from './views/root/Root.vue';
560
558
 
561
- // Uluslararasılaştırma yapılandırmasını çıkar
562
- const { internationalization, middleware } = configuration;
563
- const { defaultLocale } = internationalization;
564
-
565
559
  /**
566
560
  * Yerel ayar özel yollarla ve meta verilerle rotaları bildirin.
567
561
  */
568
- const routes = localeFlatMap((localizedData) => [
562
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
569
563
  {
570
- path: `${localizedData.urlPrefix}/`,
571
- name: `Root-${localizedData.locale}`,
564
+ path: `${urlPrefix}/`,
565
+ name: `Root-${locale}`,
572
566
  component: RootView,
573
567
  meta: {
574
- locale: localizedData.locale,
568
+ locale,
575
569
  },
576
570
  },
577
571
  {
578
- path: `${localizedData.urlPrefix}/home`,
579
- name: `Home-${localizedData.locale}`,
572
+ path: `${urlPrefix}/home`,
573
+ name: `Home-${locale}`,
580
574
  component: HomeView,
581
575
  meta: {
582
- locale: localizedData.locale,
576
+ locale,
583
577
  },
584
578
  },
585
579
  ]);
@@ -594,23 +588,11 @@ export const router = createRouter({
594
588
  router.beforeEach((to, _from, next) => {
595
589
  const client = createIntlayerClient();
596
590
 
597
- const metaLocale = to.meta.locale as Locales | undefined;
591
+ const metaLocale = to.meta.locale as Locale;
598
592
 
599
- if (metaLocale) {
600
- // Rota meta'sında tanımlanan yerel ayarı yeniden kullan
601
- client.setLocale(metaLocale);
602
- next();
603
- } else {
604
- // Geri dönüş: meta'da yerel ayar yok, muhtemelen eşleşmeyen rota
605
- // İsteğe bağlı: 404'ü yönetin veya varsayılan yerel ayara yönlendirin
606
- client.setLocale(defaultLocale);
607
-
608
- if (middleware.prefixDefault) {
609
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
610
- } else {
611
- next(getPathWithoutLocale(to.path));
612
- }
613
- }
593
+ // Rota meta'sında tanımlanan yerel ayarı yeniden kullan
594
+ client.setLocale(metaLocale);
595
+ next();
614
596
  });
615
597
  ```
616
598
 
@@ -742,7 +724,7 @@ watch(
742
724
  İpucu: Daha iyi SEO ve erişilebilirlik için, dil özel sayfalarına bağlanmak üzere `<a href="/fr/home" hreflang="fr">` gibi etiketleri kullanın. Bu, arama motorlarının dil özel URL'lerini keşfetmesine ve uygun şekilde indekslemesine olanak tanır. SPA davranışını korumak için varsayılan navigasyonu @click.prevent ile önleyin, useLocale ile yerel ayarı değiştirin ve Vue Router kullanarak programatik olarak gidin.
743
725
 
744
726
  ```html
745
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
727
+ <ol>
746
728
  <li>
747
729
  <a
748
730
  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: Cập nhật tài liệu
@@ -548,7 +551,55 @@ export const Route = createFileRoute("/{-$locale}/")({
548
551
 
549
552
  ---
550
553
 
551
- ### Bước 13: Cấu hình TypeScript (Tùy chọn)
554
+ ### Step 13: Retrieve the locale in your server actions (Optional)
555
+
556
+ You may want to access the current locale from inside your server actions or API endpoints.
557
+ You can do this using the `getLocale` helper from `intlayer`.
558
+
559
+ Here's an example using TanStack Start's server functions:
560
+
561
+ ```tsx fileName="src/routes/{-$locale}/index.tsx"
562
+ import { createServerFn } from "@tanstack/react-start";
563
+ import {
564
+ getRequestHeader,
565
+ getRequestHeaders,
566
+ } from "@tanstack/react-start/server";
567
+ import { getCookie, getIntlayer, getLocale } from "intlayer";
568
+
569
+ export const getLocaleServer = createServerFn().handler(async () => {
570
+ const locale = await getLocale({
571
+ // Get the cookie from the request (default: 'INTLAYER_LOCALE')
572
+ getCookie: (name) => {
573
+ const cookieString = getRequestHeader("cookie");
574
+
575
+ return getCookie(name, cookieString);
576
+ },
577
+ // Get the header from the request (default: 'x-intlayer-locale')
578
+ getHeader: (name) => getRequestHeader(name),
579
+ // Fallback using Accept-Language negotiation
580
+ getAllHeaders: async () => {
581
+ const headers = getRequestHeaders();
582
+ const result: Record<string, string> = {};
583
+
584
+ // Convert the TypedHeaders into a plain Record<string, string>
585
+ for (const [key, value] of headers.entries()) {
586
+ result[key] = value;
587
+ }
588
+
589
+ return result;
590
+ },
591
+ });
592
+
593
+ // Retrieve some content using getIntlayer()
594
+ const content = getIntlayer("app", locale);
595
+
596
+ return { locale, content };
597
+ });
598
+ ```
599
+
600
+ ---
601
+
602
+ ### Bước 14: Cấu hình TypeScript (Tùy chọn)
552
603
 
553
604
  Intlayer sử dụng module augmentation để tận dụng các lợi ích của TypeScript và làm cho codebase của bạn mạnh mẽ hơn.
554
605
 
@@ -567,53 +567,47 @@ Ví dụ:
567
567
  Trước tiên, cài đặt Vue Router:
568
568
 
569
569
  ```bash packageManager="npm"
570
- npm install intlayer vue-router
570
+ npm install vue-router
571
571
  ```
572
572
 
573
573
  ```bash packageManager="pnpm"
574
- pnpm add intlayer vue-router
574
+ pnpm add vue-router
575
575
  ```
576
576
 
577
577
  ```bash packageManager="yarn"
578
- yarn add intlayer vue-router
578
+ yarn add vue-router
579
579
  ```
580
580
 
581
581
  Sau đó, tạo một cấu hình router xử lý định tuyến dựa trên ngôn ngữ:
582
582
 
583
583
  ```js fileName="src/router/index.ts"
584
584
  import {
585
- configuration,
586
- getPathWithoutLocale,
587
585
  localeFlatMap,
588
- type Locales,
586
+ type Locale,
589
587
  } from 'intlayer';
590
588
  import { createIntlayerClient } from 'vue-intlayer';
591
589
  import { createRouter, createWebHistory } from 'vue-router';
592
590
  import HomeView from './views/home/HomeView.vue';
593
591
  import RootView from './views/root/Root.vue';
594
592
 
595
- // Lấy cấu hình quốc tế hóa
596
- const { internationalization, middleware } = configuration;
597
- const { defaultLocale } = internationalization;
598
-
599
593
  /**
600
594
  * Khai báo các route với đường dẫn và metadata theo từng ngôn ngữ.
601
595
  */
602
- const routes = localeFlatMap((localizedData) => [
596
+ const routes = localeFlatMap(({ urlPrefix, locale }) => [
603
597
  {
604
- path: `${localizedData.urlPrefix}/`,
605
- name: `Root-${localizedData.locale}`,
598
+ path: `${urlPrefix}/`,
599
+ name: `Root-${locale}`,
606
600
  component: RootView,
607
601
  meta: {
608
- locale: localizedData.locale,
602
+ locale,
609
603
  },
610
604
  },
611
605
  {
612
- path: `${localizedData.urlPrefix}/home`,
613
- name: `Home-${localizedData.locale}`,
606
+ path: `${urlPrefix}/home`,
607
+ name: `Home-${locale}`,
614
608
  component: HomeView,
615
609
  meta: {
616
- locale: localizedData.locale,
610
+ locale,
617
611
  },
618
612
  },
619
613
  ]);
@@ -628,23 +622,11 @@ export const router = createRouter({
628
622
  router.beforeEach((to, _from, next) => {
629
623
  const client = createIntlayerClient();
630
624
 
631
- const metaLocale = to.meta.locale as Locales | undefined;
625
+ const metaLocale = to.meta.locale as Locale;
632
626
 
633
- if (metaLocale) {
634
- // Tái sử dụng locale đã định nghĩa trong meta của route
635
- client.setLocale(metaLocale);
636
- next();
637
- } else {
638
- // Trường hợp fallback: không có locale trong meta, có thể là route không khớp
639
- // Tùy chọn: xử lý 404 hoặc chuyển hướng về locale mặc định
640
- client.setLocale(defaultLocale);
641
-
642
- if (middleware.prefixDefault) {
643
- next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
644
- } else {
645
- next(getPathWithoutLocale(to.path));
646
- }
647
- }
627
+ // Tái sử dụng locale đã định nghĩa trong meta của route
628
+ client.setLocale(metaLocale);
629
+ next();
648
630
  });
649
631
  ```
650
632
 
@@ -776,7 +758,7 @@ watch(
776
758
  Mẹo: Để cải thiện SEO và khả năng truy cập, hãy sử dụng thẻ như `<a href="/fr/home" hreflang="fr">` để liên kết đến các trang đã được địa phương hóa, như được trình bày trong Bước 10. Điều này cho phép các công cụ tìm kiếm phát hiện và lập chỉ mục các URL theo ngôn ngữ một cách chính xác. Để giữ nguyên hành vi SPA, bạn có thể ngăn chặn điều hướng mặc định với @click.prevent, thay đổi locale bằng useLocale, và điều hướng chương trình bằng Vue Router.
777
759
 
778
760
  ```html
779
- <ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">
761
+ <ol>
780
762
  <li>
781
763
  <a
782
764
  hreflang="x-default"