@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.
- package/docs/ar/intlayer_with_tanstack.md +52 -1
- package/docs/ar/intlayer_with_vite+vue.md +16 -34
- package/docs/de/intlayer_with_tanstack.md +52 -1
- package/docs/de/intlayer_with_vite+vue.md +16 -34
- package/docs/en/intlayer_with_tanstack.md +52 -1
- package/docs/en/intlayer_with_vite+vue.md +16 -34
- package/docs/en-GB/intlayer_with_tanstack.md +52 -1
- package/docs/en-GB/intlayer_with_vite+vue.md +16 -34
- package/docs/es/intlayer_with_tanstack.md +52 -1
- package/docs/es/intlayer_with_vite+vue.md +16 -34
- package/docs/fr/intlayer_with_tanstack.md +52 -1
- package/docs/fr/intlayer_with_vite+vue.md +16 -34
- package/docs/hi/intlayer_with_tanstack.md +52 -1
- package/docs/hi/intlayer_with_vite+vue.md +16 -34
- package/docs/id/intlayer_with_tanstack.md +52 -1
- package/docs/id/intlayer_with_vite+vue.md +16 -34
- package/docs/it/intlayer_with_tanstack.md +52 -1
- package/docs/it/intlayer_with_vite+vue.md +16 -34
- package/docs/ja/intlayer_with_tanstack.md +52 -1
- package/docs/ja/intlayer_with_vite+vue.md +16 -34
- package/docs/ko/intlayer_with_tanstack.md +52 -1
- package/docs/ko/intlayer_with_vite+vue.md +16 -34
- package/docs/pl/intlayer_with_tanstack.md +52 -1
- package/docs/pl/intlayer_with_vite+vue.md +16 -34
- package/docs/pt/intlayer_with_tanstack.md +52 -1
- package/docs/pt/intlayer_with_vite+vue.md +16 -34
- package/docs/ru/intlayer_with_tanstack.md +52 -1
- package/docs/ru/intlayer_with_vite+vue.md +16 -34
- package/docs/tr/intlayer_with_tanstack.md +52 -1
- package/docs/tr/intlayer_with_vite+vue.md +16 -34
- package/docs/vi/intlayer_with_tanstack.md +52 -1
- package/docs/vi/intlayer_with_vite+vue.md +16 -34
- package/docs/zh/intlayer_with_tanstack.md +52 -1
- package/docs/zh/intlayer_with_vite+vue.md +16 -34
- 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:
|
|
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
|
|
562
|
+
npm install vue-router
|
|
563
563
|
```
|
|
564
564
|
|
|
565
565
|
```bash packageManager="pnpm"
|
|
566
|
-
pnpm add
|
|
566
|
+
pnpm add vue-router
|
|
567
567
|
```
|
|
568
568
|
|
|
569
569
|
```bash packageManager="yarn"
|
|
570
|
-
yarn add
|
|
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
|
|
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((
|
|
588
|
+
const routes = localeFlatMap(({ urlPrefix, locale }) => [
|
|
595
589
|
{
|
|
596
|
-
path: `${
|
|
597
|
-
name: `Root-${
|
|
590
|
+
path: `${urlPrefix}/`,
|
|
591
|
+
name: `Root-${locale}`,
|
|
598
592
|
component: RootView,
|
|
599
593
|
meta: {
|
|
600
|
-
locale
|
|
594
|
+
locale,
|
|
601
595
|
},
|
|
602
596
|
},
|
|
603
597
|
{
|
|
604
|
-
path: `${
|
|
605
|
-
name: `Home-${
|
|
598
|
+
path: `${urlPrefix}/home`,
|
|
599
|
+
name: `Home-${locale}`,
|
|
606
600
|
component: HomeView,
|
|
607
601
|
meta: {
|
|
608
|
-
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
|
|
617
|
+
const metaLocale = to.meta.locale as Locale;
|
|
624
618
|
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
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
|
|
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:
|
|
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
|
|
565
|
+
npm install vue-router
|
|
566
566
|
```
|
|
567
567
|
|
|
568
568
|
```bash packageManager="pnpm"
|
|
569
|
-
pnpm add
|
|
569
|
+
pnpm add vue-router
|
|
570
570
|
```
|
|
571
571
|
|
|
572
572
|
```bash packageManager="yarn"
|
|
573
|
-
yarn add
|
|
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
|
|
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((
|
|
591
|
+
const routes = localeFlatMap(({ urlPrefix, locale }) => [
|
|
598
592
|
{
|
|
599
|
-
path: `${
|
|
600
|
-
name: `Root-${
|
|
593
|
+
path: `${urlPrefix}/`,
|
|
594
|
+
name: `Root-${locale}`,
|
|
601
595
|
component: RootView,
|
|
602
596
|
meta: {
|
|
603
|
-
locale
|
|
597
|
+
locale,
|
|
604
598
|
},
|
|
605
599
|
},
|
|
606
600
|
{
|
|
607
|
-
path: `${
|
|
608
|
-
name: `Home-${
|
|
601
|
+
path: `${urlPrefix}/home`,
|
|
602
|
+
name: `Home-${locale}`,
|
|
609
603
|
component: HomeView,
|
|
610
604
|
meta: {
|
|
611
|
-
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
|
|
620
|
+
const metaLocale = to.meta.locale as Locale;
|
|
627
621
|
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
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
|
|
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
|
-
###
|
|
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
|
|
536
|
+
npm install vue-router
|
|
537
537
|
```
|
|
538
538
|
|
|
539
539
|
```bash packageManager="pnpm"
|
|
540
|
-
pnpm add
|
|
540
|
+
pnpm add vue-router
|
|
541
541
|
```
|
|
542
542
|
|
|
543
543
|
```bash packageManager="yarn"
|
|
544
|
-
yarn add
|
|
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
|
|
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((
|
|
562
|
+
const routes = localeFlatMap(({ urlPrefix, locale }) => [
|
|
569
563
|
{
|
|
570
|
-
path: `${
|
|
571
|
-
name: `Root-${
|
|
564
|
+
path: `${urlPrefix}/`,
|
|
565
|
+
name: `Root-${locale}`,
|
|
572
566
|
component: RootView,
|
|
573
567
|
meta: {
|
|
574
|
-
locale
|
|
568
|
+
locale,
|
|
575
569
|
},
|
|
576
570
|
},
|
|
577
571
|
{
|
|
578
|
-
path: `${
|
|
579
|
-
name: `Home-${
|
|
572
|
+
path: `${urlPrefix}/home`,
|
|
573
|
+
name: `Home-${locale}`,
|
|
580
574
|
component: HomeView,
|
|
581
575
|
meta: {
|
|
582
|
-
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
|
|
591
|
+
const metaLocale = to.meta.locale as Locale;
|
|
598
592
|
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
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
|
|
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
|
-
###
|
|
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
|
|
570
|
+
npm install vue-router
|
|
571
571
|
```
|
|
572
572
|
|
|
573
573
|
```bash packageManager="pnpm"
|
|
574
|
-
pnpm add
|
|
574
|
+
pnpm add vue-router
|
|
575
575
|
```
|
|
576
576
|
|
|
577
577
|
```bash packageManager="yarn"
|
|
578
|
-
yarn add
|
|
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
|
|
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((
|
|
596
|
+
const routes = localeFlatMap(({ urlPrefix, locale }) => [
|
|
603
597
|
{
|
|
604
|
-
path: `${
|
|
605
|
-
name: `Root-${
|
|
598
|
+
path: `${urlPrefix}/`,
|
|
599
|
+
name: `Root-${locale}`,
|
|
606
600
|
component: RootView,
|
|
607
601
|
meta: {
|
|
608
|
-
locale
|
|
602
|
+
locale,
|
|
609
603
|
},
|
|
610
604
|
},
|
|
611
605
|
{
|
|
612
|
-
path: `${
|
|
613
|
-
name: `Home-${
|
|
606
|
+
path: `${urlPrefix}/home`,
|
|
607
|
+
name: `Home-${locale}`,
|
|
614
608
|
component: HomeView,
|
|
615
609
|
meta: {
|
|
616
|
-
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
|
|
625
|
+
const metaLocale = to.meta.locale as Locale;
|
|
632
626
|
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
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
|
|
761
|
+
<ol>
|
|
780
762
|
<li>
|
|
781
763
|
<a
|
|
782
764
|
hreflang="x-default"
|