\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (Opcional) Passo 6: Configurar o roteamento\n\nOs passos a seguir mostram como configurar o roteamento baseado em locale no SvelteKit. Isso permite que suas URLs incluam o prefixo do locale (ex.: `/en/about`, `/fr/about`) para melhor SEO e experiência do usuário.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Definir o tipo de locale\n ├── hooks.server.ts # Gerenciar o roteamento do locale\n ├── lib\n │ └── getLocale.ts # Verificar o locale a partir do header, cookies\n ├── params\n │ └── locale.ts # Definir o parâmetro do locale\n └── routes\n ├── [[locale=locale]] # Envolver em um grupo de rotas para definir o locale\n │ ├── +layout.svelte # Layout local para a rota\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Layout raiz para fontes e estilos globais\n```\n\n### Passo 7: Gerenciar a Detecção de Locale no Lado do Servidor (Hooks)\n\nNo SvelteKit, o servidor precisa saber o locale do usuário para renderizar o conteúdo correto durante o SSR. Usamos `hooks.server.ts` para detectar o locale a partir da URL ou dos cookies.\n\nCrie ou modifique `src/hooks.server.ts`:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // Verifica se o caminho atual já começa com uma localidade (ex: /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Se NÃO houver localidade presente na URL (ex: usuário visita \"/\"), redireciona\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Redirecionamento temporário\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nEm seguida, crie um helper para obter a localidade do usuário a partir do evento da requisição:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * Obtém a localidade do usuário a partir do evento de requisição.\n * Esta função é usada no hook `handle` em `src/hooks.server.ts`.\n *\n * Primeiro, tenta obter a localidade do armazenamento do Intlayer (cookies ou cabeçalhos personalizados).\n * Se a localidade não for encontrada, recorre à negociação \"Accept-Language\" do navegador.\n *\n * @param event - O evento de requisição do SvelteKit\n * @returns A localidade do usuário\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Tenta obter a localidade do armazenamento do Intlayer (Cookies ou cabeçalhos)\n const storedLocale = getLocaleFromStorage({\n // Acesso aos cookies do SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Acesso aos headers do SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Recurso de fallback para a negociação \"Accept-Language\" do navegador\n const negotiatorHeaders: Record<string, string> = {};\n\n // Converte o objeto Headers do SvelteKit para um Record<string, string> simples\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Verifica a localidade a partir do header `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Retorna a localidade padrão se nenhuma correspondência for encontrada\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` verificará o locale a partir do header ou cookie dependendo da sua configuração. Veja [Configuração](https://intlayer.org/doc/configuration) para mais detalhes.\n\n> A função `localeDetector` tratará o header `Accept-Language` e retornará a melhor correspondência.\n\nSe o locale não estiver configurado, queremos retornar um erro 404. Para facilitar, podemos criar uma função `match` para verificar se o locale é válido:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **Nota:** Certifique-se de que seu arquivo `src/app.d.ts` inclua a definição do locale:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nPara o arquivo `+layout.svelte`, podemos remover tudo, para manter apenas conteúdo estático, não relacionado à i18n:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nEm seguida, crie uma nova página e layout dentro do grupo `[[locale=locale]]`:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// Use o tipo genérico Load\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// Inicializar o Intlayer com a locale da rota\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Usar o dicionário de conteúdo do layout\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// Usar o dicionário de conteúdo da home\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (Opcional) Passo 8: Links Internacionalizados\n\nPara SEO, é recomendado prefixar suas rotas com a localidade (ex: `/en/about`, `/fr/about`). Este componente automaticamente prefixa qualquer link com a localidade atual.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nSe você usar `goto` do SvelteKit, pode usar a mesma lógica com `getLocalizedUrl` para navegar para a URL localizada:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // Navega para /en/about ou /fr/about dependendo da localidade\n```\n\n### (Opcional) Passo 9: Seletor de Idioma\n\nPara permitir que os usuários mudem de idioma, atualize a URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Vai definir a localidade na store e disparar onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Opcional) Passo 10: Adicionar proxy backend\n\nPara adicionar um proxy backend à sua aplicação SvelteKit, você pode usar a função `intlayerProxy` fornecida pelo plugin `vite-intlayer`. Este plugin detectará automaticamente a melhor localidade para o usuário com base na URL, cookies e preferências de idioma do navegador.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (Opcional) Passo 11: Configurar o editor / CMS do intlayer\n\nPara configurar o editor do intlayer, você deve seguir a [documentação do editor intlayer](/pt/doc/concept/editor).\n\nPara configurar o CMS do intlayer, você deve seguir a [documentação do CMS intlayer](/pt/doc/concept/cms).\n\nPara poder visualizar o seletor do editor intlayer, você deverá usar a sintaxe de componente no seu conteúdo intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configuração do Git\n\nÉ recomendado ignorar os arquivos gerados pelo Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignorar os arquivos gerados pelo Intlayer\n.intlayer\n```\n\n---\n\n### Ir Além\n\nPara poder visualizar o seletor do editor intlayer, você terá que usar a sintaxe de componente no seu conteúdo intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configuração do Git\n\nÉ recomendado ignorar os arquivos gerados pelo Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignorar os arquivos gerados pelo Intlayer\n.intlayer\n```\n\n---\n\n### (Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes\n\nSe você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.\n\nPara facilitar esse processo, o Intlayer propõe um [compilador](/pt/doc/compiler) / [extrator](/pt/doc/concept/cli/extract) para transformar seus componentes e extrair o conteúdo.\n\nPara configurá-lo, você pode adicionar uma seção `compiler` no seu arquivo `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Resto da sua configuração\n compiler: {\n /**\n * Indica se o compilador deve ser ativado.\n */\n enabled: true,\n\n /**\n * Define o caminho dos arquivos de saída\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indica se os componentes devem ser salvos após serem transformados. Dessa forma, o compilador pode ser executado apenas uma vez para transformar o aplicativo e depois removido.\n */\n saveComponents: false,\n\n /**\n * Prefixo da chave do dicionário\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nExecute o extrator para transformar seus componentes e extrair o conteúdo\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nAtualize seu `vite.config.ts` para incluir o plugin `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Adiciona o plugin do compilador\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Ou npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Ir Além\n\n- **Editor Visual**: Integre o [Editor Visual Intlayer](/pt/doc/concept/editor) para editar traduções diretamente pela interface.\n- **CMS**: Externalize o gerenciamento do seu conteúdo usando o [CMS Intlayer](/pt/doc/concept/cms).\n","about":"Descubra como tornar seu site SvelteKit multilíngue. Siga a documentação para internacionalizar (i18n) e traduzir usando Server-Side Rendering (SSR).","url":"https://intlayer.org/pt/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internacionalização, Documentação, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desenvolvedores, Gerentes de Conteúdo"}}

Criação:2025-11-20Última atualização:2026-05-06

Ver o modelo de aplicação no GitHub

Esta página tem um modelo de aplicação disponível.

Ver a aplicação de demonstração

Esta página liga a uma demonstração ao vivo do modelo.

Referência esta documentação ao seu assistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Atualizar o uso da API useIntlayer do Solid para acesso direto a propriedades"
v8.9.004/05/2026
"Adicionar comando init"
v7.5.930/12/2025
"Histórico inicial"
v7.1.1020/11/2025

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Traduza seu site SvelteKit usando Intlayer | Internacionalização (i18n)

ide.intlayer.org

Índice

O que é o Intlayer?

Intlayer é uma biblioteca inovadora e open-source de internacionalização (i18n) projetada para simplificar o suporte multilíngue em aplicações web modernas. Ela funciona perfeitamente com as capacidades de Server-Side Rendering (SSR) do SvelteKit.

Com o Intlayer, você pode:

Gerenciar traduções facilmente usando dicionários declarativos no nível do componente.
Localizar dinamicamente metadados, rotas e conteúdo.
Garantir suporte ao TypeScript com tipos gerados automaticamente.
Aproveitar o SSR do SvelteKit para uma internacionalização amigável ao SEO.

Guia Passo a Passo para Configurar o Intlayer em uma Aplicação SvelteKit

Para começar, crie um novo projeto SvelteKit. Aqui está a estrutura final que iremos criar:

bash

Copiar código

Copiar o código para a área de transferência

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Instalar Dependências

Instale os pacotes necessários usando npm:

bash

Copiar código

Copiar o código para a área de transferência

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: O pacote principal de i18n.
svelte-intlayer: Fornece context providers e stores para Svelte/SvelteKit.
vite-intlayer: O plugin do Vite para integrar as declarações de conteúdo com o processo de build.

Passo 2: Configuração do seu projeto

Crie um arquivo de configuração na raiz do seu projeto:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integre o Intlayer na sua Configuração do Vite

Atualize seu vite.config.ts para incluir o plugin Intlayer. Este plugin gerencia a transpiração dos seus arquivos de conteúdo.

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // a ordem importa, Intlayer deve ser colocado antes do SvelteKit});

Passo 4: Declare Seu Conteúdo

Crie seus arquivos de declaração de conteúdo em qualquer lugar dentro da sua pasta src (por exemplo, src/lib/content ou junto aos seus componentes). Esses arquivos definem o conteúdo traduzível para sua aplicação usando a função t() para cada locale.

Passo 5: Utilize o Intlayer em Seus Componentes

Agora você pode usar a função useIntlayer em qualquer componente Svelte. Ela retorna uma store reativa que atualiza automaticamente quando o locale muda. A função respeitará automaticamente o locale atual (tanto durante SSR quanto na navegação do lado do cliente).

Nota: useIntlayer retorna uma store do Svelte, então você precisa usar o prefixo `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Como traduzir sua aplicação SvelteKit – guia i18n 2026 description: Descubra como tornar seu site SvelteKit multilíngue. Siga a documentação para internacionalizar (i18n) e traduzir usando Server-Side Rendering (SSR). keywords:

Internacionalização
Documentação
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Histórico inicial

Traduza seu site SvelteKit usando Intlayer | Internacionalização (i18n)

Índice

O que é o Intlayer?

Com o Intlayer, você pode:

Gerenciar traduções facilmente usando dicionários declarativos no nível do componente.
Localizar dinamicamente metadados, rotas e conteúdo.
Garantir suporte ao TypeScript com tipos gerados automaticamente.
Aproveitar o SSR do SvelteKit para uma internacionalização amigável ao SEO.

Guia Passo a Passo para Configurar o Intlayer em uma Aplicação SvelteKit

Para começar, crie um novo projeto SvelteKit. Aqui está a estrutura final que iremos criar:

bash

Copiar código

Copiar o código para a área de transferência

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Instalar Dependências

Instale os pacotes necessários usando npm:

bash

Copiar código

Copiar o código para a área de transferência

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: O pacote principal de i18n.
svelte-intlayer: Fornece context providers e stores para Svelte/SvelteKit.
vite-intlayer: O plugin do Vite para integrar as declarações de conteúdo com o processo de build.

Passo 2: Configuração do seu projeto

Crie um arquivo de configuração na raiz do seu projeto:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integre o Intlayer na sua Configuração do Vite

Atualize seu vite.config.ts para incluir o plugin Intlayer. Este plugin gerencia a transpiração dos seus arquivos de conteúdo.

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // a ordem importa, Intlayer deve ser colocado antes do SvelteKit});

Passo 4: Declare Seu Conteúdo

Passo 5: Utilize o Intlayer em Seus Componentes

para acessar seu valor reativo (por exemplo, $content.title).

src/lib/components/Component.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corresponde à chave definida no Passo 4  const content = useIntlayer("hero-section");</script><!-- Renderizar conteúdo como conteúdo simples  --><h1>{$content.title}</h1><!-- Para renderizar o conteúdo editável usando o editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Para renderizar o conteúdo como uma string --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opcional) Passo 6: Configurar o roteamento

Os passos a seguir mostram como configurar o roteamento baseado em locale no SvelteKit. Isso permite que suas URLs incluam o prefixo do locale (ex.: /en/about, /fr/about) para melhor SEO e experiência do usuário.

bash

Copiar código

Copiar o código para a área de transferência

.└─── src    ├── app.d.ts                  # Definir o tipo de locale    ├── hooks.server.ts           # Gerenciar o roteamento do locale    ├── lib    │   └── getLocale.ts          # Verificar o locale a partir do header, cookies    ├── params    │   └── locale.ts             # Definir o parâmetro do locale    └── routes        ├── [[locale=locale]]     # Envolver em um grupo de rotas para definir o locale        │   ├── +layout.svelte    # Layout local para a rota        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Layout raiz para fontes e estilos globais

Passo 7: Gerenciar a Detecção de Locale no Lado do Servidor (Hooks)

No SvelteKit, o servidor precisa saber o locale do usuário para renderizar o conteúdo correto durante o SSR. Usamos hooks.server.ts para detectar o locale a partir da URL ou dos cookies.

Crie ou modifique src/hooks.server.ts:

src/hooks.server.ts

Copiar código

Copiar o código para a área de transferência

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Verifica se o caminho atual já começa com uma localidade (ex: /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Se NÃO houver localidade presente na URL (ex: usuário visita "/"), redireciona  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirecionamento temporário    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Em seguida, crie um helper para obter a localidade do usuário a partir do evento da requisição:

src/lib/getLocale.ts

Copiar código

Copiar o código para a área de transferência

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Obtém a localidade do usuário a partir do evento de requisição. * Esta função é usada no hook `handle` em `src/hooks.server.ts`. * * Primeiro, tenta obter a localidade do armazenamento do Intlayer (cookies ou cabeçalhos personalizados). * Se a localidade não for encontrada, recorre à negociação "Accept-Language" do navegador. * * @param event - O evento de requisição do SvelteKit * @returns A localidade do usuário */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Tenta obter a localidade do armazenamento do Intlayer (Cookies ou cabeçalhos)  const storedLocale = getLocaleFromStorage({    // Acesso aos cookies do SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Acesso aos headers do SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Recurso de fallback para a negociação "Accept-Language" do navegador  const negotiatorHeaders: Record<string, string> = {};  // Converte o objeto Headers do SvelteKit para um Record<string, string> simples  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Verifica a localidade a partir do header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Retorna a localidade padrão se nenhuma correspondência for encontrada  return defaultLocale;};

getLocaleFromStorage verificará o locale a partir do header ou cookie dependendo da sua configuração. Veja Configuração para mais detalhes.

A função localeDetector tratará o header Accept-Language e retornará a melhor correspondência.

Se o locale não estiver configurado, queremos retornar um erro 404. Para facilitar, podemos criar uma função match para verificar se o locale é válido:

/src/params/locale.ts

Copiar código

Copiar o código para a área de transferência

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Nota: Certifique-se de que seu arquivo src/app.d.ts inclua a definição do locale:
typescript
Copiar código
Copiar o código para a área de transferência
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Para o arquivo +layout.svelte, podemos remover tudo, para manter apenas conteúdo estático, não relacionado à i18n:

src/+layout.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Em seguida, crie uma nova página e layout dentro do grupo [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Copiar código

Copiar o código para a área de transferência

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Use o tipo genérico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicializar o Intlayer com a locale da rota  $effect(() => {      setupIntlayer(data.locale);  });    // Usar o dicionário de conteúdo do layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Copiar código

Copiar o código para a área de transferência

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usar o dicionário de conteúdo da home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opcional) Passo 8: Links Internacionalizados

Para SEO, é recomendado prefixar suas rotas com a localidade (ex: /en/about, /fr/about). Este componente automaticamente prefixa qualquer link com a localidade atual.

src/lib/components/LocalizedLink.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Auxiliar para prefixar URL com a localidade atual  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Se você usar goto do SvelteKit, pode usar a mesma lógica com getLocalizedUrl para navegar para a URL localizada:

typescript

Copiar código

Copiar o código para a área de transferência

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navega para /en/about ou /fr/about dependendo da localidade

(Opcional) Passo 9: Seletor de Idioma

Para permitir que os usuários mudem de idioma, atualize a URL.

src/lib/components/LanguageSwitcher.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Vai definir a localidade na store e disparar onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opcional) Passo 10: Adicionar proxy backend

Para adicionar um proxy backend à sua aplicação SvelteKit, você pode usar a função intlayerProxy fornecida pelo plugin vite-intlayer. Este plugin detectará automaticamente a melhor localidade para o usuário com base na URL, cookies e preferências de idioma do navegador.

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opcional) Passo 11: Configurar o editor / CMS do intlayer

Para configurar o editor do intlayer, você deve seguir a documentação do editor intlayer.

Para configurar o CMS do intlayer, você deve seguir a documentação do CMS intlayer.

Para poder visualizar o seletor do editor intlayer, você deverá usar a sintaxe de componente no seu conteúdo intlayer.

Component.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar conteúdo como conteúdo simples -->  <h1>{$content.title}</h1>  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->  {@const Component = $content.component}<Component /></div>

Configuração do Git

É recomendado ignorar os arquivos gerados pelo Intlayer.

.gitignore

Copiar código

Copiar o código para a área de transferência

# Ignorar os arquivos gerados pelo Intlayer.intlayer

Ir Além

Para poder visualizar o seletor do editor intlayer, você terá que usar a sintaxe de componente no seu conteúdo intlayer.

Component.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar conteúdo como conteúdo simples -->  <h1>{$content.title}</h1>  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->  {@const Component = $content.component}<Component /></div>

Configuração do Git

É recomendado ignorar os arquivos gerados pelo Intlayer.

.gitignore

Copiar código

Copiar o código para a área de transferência

# Ignorar os arquivos gerados pelo Intlayer.intlayer

(Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes

Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.

Para facilitar esse processo, o Intlayer propõe um compilador / extrator para transformar seus componentes e extrair o conteúdo.

Para configurá-lo, você pode adicionar uma seção compiler no seu arquivo intlayer.config.ts:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto da sua configuração
  compiler: {
    /**
     * Indica se o compilador deve ser ativado.
     */
    enabled: true,

    /**
     * Define o caminho dos arquivos de saída
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se os componentes devem ser salvos após serem transformados. Dessa forma, o compilador pode ser executado apenas uma vez para transformar o aplicativo e depois removido.
     */
    saveComponents: false,

    /**
     * Prefixo da chave do dicionário
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Execute o extrator para transformar seus componentes e extrair o conteúdo

bash

Copiar código

Copiar o código para a área de transferência

npx intlayer extract

Atualize seu vite.config.ts para incluir o plugin intlayerCompiler:

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adiciona o plugin do compilador ],});

bash

Copiar código

Copiar o código para a área de transferência

npm run build # Ou npm run dev

Ir Além

Editor Visual: Integre o Editor Visual Intlayer para editar traduções diretamente pela interface.
CMS: Externalize o gerenciamento do seu conteúdo usando o CMS Intlayer.

Vite e Svelte

Vite e Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // Vai definir a localidade na store e disparar onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configuração do Git\n\nÉ recomendado ignorar os arquivos gerados pelo Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignorar os arquivos gerados pelo Intlayer\n.intlayer\n```\n\n---\n\n### Ir Além\n\nPara poder visualizar o seletor do editor intlayer, você terá que usar a sintaxe de componente no seu conteúdo intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Configuração do Git\n\nÉ recomendado ignorar os arquivos gerados pelo Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignorar os arquivos gerados pelo Intlayer\n.intlayer\n```\n\n---\n\n### (Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes\n\nSe você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.\n\nPara facilitar esse processo, o Intlayer propõe um [compilador](/pt/doc/compiler) / [extrator](/pt/doc/concept/cli/extract) para transformar seus componentes e extrair o conteúdo.\n\nPara configurá-lo, você pode adicionar uma seção `compiler` no seu arquivo `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Resto da sua configuração\n compiler: {\n /**\n * Indica se o compilador deve ser ativado.\n */\n enabled: true,\n\n /**\n * Define o caminho dos arquivos de saída\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indica se os componentes devem ser salvos após serem transformados. Dessa forma, o compilador pode ser executado apenas uma vez para transformar o aplicativo e depois removido.\n */\n saveComponents: false,\n\n /**\n * Prefixo da chave do dicionário\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nExecute o extrator para transformar seus componentes e extrair o conteúdo\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nAtualize seu `vite.config.ts` para incluir o plugin `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Adiciona o plugin do compilador\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Ou npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Ir Além\n\n- **Editor Visual**: Integre o [Editor Visual Intlayer](/pt/doc/concept/editor) para editar traduções diretamente pela interface.\n- **CMS**: Externalize o gerenciamento do seu conteúdo usando o [CMS Intlayer](/pt/doc/concept/cms).\n","about":"Descubra como tornar seu site SvelteKit multilíngue. Siga a documentação para internacionalizar (i18n) e traduzir usando Server-Side Rendering (SSR).","url":"https://intlayer.org/pt/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internacionalização, Documentação, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desenvolvedores, Gerentes de Conteúdo"}}

Criação:2025-11-20Última atualização:2026-05-06

Ver o modelo de aplicação no GitHub

Esta página tem um modelo de aplicação disponível.

Ver a aplicação de demonstração

Esta página liga a uma demonstração ao vivo do modelo.

Referência esta documentação ao seu assistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Atualizar o uso da API useIntlayer do Solid para acesso direto a propriedades"
v8.9.004/05/2026
"Adicionar comando init"
v7.5.930/12/2025
"Histórico inicial"
v7.1.1020/11/2025

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Traduza seu site SvelteKit usando Intlayer | Internacionalização (i18n)

ide.intlayer.org

Índice

O que é o Intlayer?

Com o Intlayer, você pode:

Gerenciar traduções facilmente usando dicionários declarativos no nível do componente.
Localizar dinamicamente metadados, rotas e conteúdo.
Garantir suporte ao TypeScript com tipos gerados automaticamente.
Aproveitar o SSR do SvelteKit para uma internacionalização amigável ao SEO.

Guia Passo a Passo para Configurar o Intlayer em uma Aplicação SvelteKit

Para começar, crie um novo projeto SvelteKit. Aqui está a estrutura final que iremos criar:

bash

Copiar código

Copiar o código para a área de transferência

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Instalar Dependências

Instale os pacotes necessários usando npm:

bash

Copiar código

Copiar o código para a área de transferência

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: O pacote principal de i18n.
svelte-intlayer: Fornece context providers e stores para Svelte/SvelteKit.
vite-intlayer: O plugin do Vite para integrar as declarações de conteúdo com o processo de build.

Passo 2: Configuração do seu projeto

Crie um arquivo de configuração na raiz do seu projeto:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integre o Intlayer na sua Configuração do Vite

Atualize seu vite.config.ts para incluir o plugin Intlayer. Este plugin gerencia a transpiração dos seus arquivos de conteúdo.

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // a ordem importa, Intlayer deve ser colocado antes do SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // a ordem importa, Intlayer deve ser colocado antes do SvelteKit});

Passo 4: Declare Seu Conteúdo

Passo 5: Utilize o Intlayer em Seus Componentes

Nota: useIntlayer retorna uma store do Svelte, então você precisa usar o prefixo `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Como traduzir sua aplicação SvelteKit – guia i18n 2026 description: Descubra como tornar seu site SvelteKit multilíngue. Siga a documentação para internacionalizar (i18n) e traduzir usando Server-Side Rendering (SSR). keywords:

Internacionalização
Documentação
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Histórico inicial

Traduza seu site SvelteKit usando Intlayer | Internacionalização (i18n)

Índice

O que é o Intlayer?

Com o Intlayer, você pode:

Gerenciar traduções facilmente usando dicionários declarativos no nível do componente.
Localizar dinamicamente metadados, rotas e conteúdo.
Garantir suporte ao TypeScript com tipos gerados automaticamente.
Aproveitar o SSR do SvelteKit para uma internacionalização amigável ao SEO.

Guia Passo a Passo para Configurar o Intlayer em uma Aplicação SvelteKit

Para começar, crie um novo projeto SvelteKit. Aqui está a estrutura final que iremos criar:

bash

Copiar código

Copiar o código para a área de transferência

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Passo 1: Instalar Dependências

Instale os pacotes necessários usando npm:

bash

Copiar código

Copiar o código para a área de transferência

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: O pacote principal de i18n.
svelte-intlayer: Fornece context providers e stores para Svelte/SvelteKit.
vite-intlayer: O plugin do Vite para integrar as declarações de conteúdo com o processo de build.

Passo 2: Configuração do seu projeto

Crie um arquivo de configuração na raiz do seu projeto:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Passo 3: Integre o Intlayer na sua Configuração do Vite

Atualize seu vite.config.ts para incluir o plugin Intlayer. Este plugin gerencia a transpiração dos seus arquivos de conteúdo.

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // a ordem importa, Intlayer deve ser colocado antes do SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // a ordem importa, Intlayer deve ser colocado antes do SvelteKit});

Passo 4: Declare Seu Conteúdo

Passo 5: Utilize o Intlayer em Seus Componentes

para acessar seu valor reativo (por exemplo, $content.title).

src/lib/components/Component.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corresponde à chave definida no Passo 4  const content = useIntlayer("hero-section");</script><!-- Renderizar conteúdo como conteúdo simples  --><h1>{$content.title}</h1><!-- Para renderizar o conteúdo editável usando o editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Para renderizar o conteúdo como uma string --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corresponde à chave definida no Passo 4  const content = useIntlayer("hero-section");</script><!-- Renderizar conteúdo como conteúdo simples  --><h1>{$content.title}</h1><!-- Para renderizar o conteúdo editável usando o editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Para renderizar o conteúdo como uma string --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opcional) Passo 6: Configurar o roteamento

bash

Copiar código

Copiar o código para a área de transferência

.└─── src    ├── app.d.ts                  # Definir o tipo de locale    ├── hooks.server.ts           # Gerenciar o roteamento do locale    ├── lib    │   └── getLocale.ts          # Verificar o locale a partir do header, cookies    ├── params    │   └── locale.ts             # Definir o parâmetro do locale    └── routes        ├── [[locale=locale]]     # Envolver em um grupo de rotas para definir o locale        │   ├── +layout.svelte    # Layout local para a rota        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Layout raiz para fontes e estilos globais

.└─── src    ├── app.d.ts                  # Definir o tipo de locale    ├── hooks.server.ts           # Gerenciar o roteamento do locale    ├── lib    │   └── getLocale.ts          # Verificar o locale a partir do header, cookies    ├── params    │   └── locale.ts             # Definir o parâmetro do locale    └── routes        ├── [[locale=locale]]     # Envolver em um grupo de rotas para definir o locale        │   ├── +layout.svelte    # Layout local para a rota        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Layout raiz para fontes e estilos globais

Passo 7: Gerenciar a Detecção de Locale no Lado do Servidor (Hooks)

No SvelteKit, o servidor precisa saber o locale do usuário para renderizar o conteúdo correto durante o SSR. Usamos hooks.server.ts para detectar o locale a partir da URL ou dos cookies.

Crie ou modifique src/hooks.server.ts:

src/hooks.server.ts

Copiar código

Copiar o código para a área de transferência

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Verifica se o caminho atual já começa com uma localidade (ex: /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Se NÃO houver localidade presente na URL (ex: usuário visita "/"), redireciona  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirecionamento temporário    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Verifica se o caminho atual já começa com uma localidade (ex: /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Se NÃO houver localidade presente na URL (ex: usuário visita "/"), redireciona  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirecionamento temporário    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Em seguida, crie um helper para obter a localidade do usuário a partir do evento da requisição:

src/lib/getLocale.ts

Copiar código

Copiar o código para a área de transferência

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Obtém a localidade do usuário a partir do evento de requisição. * Esta função é usada no hook `handle` em `src/hooks.server.ts`. * * Primeiro, tenta obter a localidade do armazenamento do Intlayer (cookies ou cabeçalhos personalizados). * Se a localidade não for encontrada, recorre à negociação "Accept-Language" do navegador. * * @param event - O evento de requisição do SvelteKit * @returns A localidade do usuário */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Tenta obter a localidade do armazenamento do Intlayer (Cookies ou cabeçalhos)  const storedLocale = getLocaleFromStorage({    // Acesso aos cookies do SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Acesso aos headers do SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Recurso de fallback para a negociação "Accept-Language" do navegador  const negotiatorHeaders: Record<string, string> = {};  // Converte o objeto Headers do SvelteKit para um Record<string, string> simples  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Verifica a localidade a partir do header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Retorna a localidade padrão se nenhuma correspondência for encontrada  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Obtém a localidade do usuário a partir do evento de requisição. * Esta função é usada no hook `handle` em `src/hooks.server.ts`. * * Primeiro, tenta obter a localidade do armazenamento do Intlayer (cookies ou cabeçalhos personalizados). * Se a localidade não for encontrada, recorre à negociação "Accept-Language" do navegador. * * @param event - O evento de requisição do SvelteKit * @returns A localidade do usuário */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Tenta obter a localidade do armazenamento do Intlayer (Cookies ou cabeçalhos)  const storedLocale = getLocaleFromStorage({    // Acesso aos cookies do SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Acesso aos headers do SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Recurso de fallback para a negociação "Accept-Language" do navegador  const negotiatorHeaders: Record<string, string> = {};  // Converte o objeto Headers do SvelteKit para um Record<string, string> simples  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Verifica a localidade a partir do header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Retorna a localidade padrão se nenhuma correspondência for encontrada  return defaultLocale;};

getLocaleFromStorage verificará o locale a partir do header ou cookie dependendo da sua configuração. Veja Configuração para mais detalhes.

A função localeDetector tratará o header Accept-Language e retornará a melhor correspondência.

Se o locale não estiver configurado, queremos retornar um erro 404. Para facilitar, podemos criar uma função match para verificar se o locale é válido:

/src/params/locale.ts

Copiar código

Copiar o código para a área de transferência

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Nota: Certifique-se de que seu arquivo src/app.d.ts inclua a definição do locale:
typescript
Copiar código
Copiar o código para a área de transferência
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Para o arquivo +layout.svelte, podemos remover tudo, para manter apenas conteúdo estático, não relacionado à i18n:

src/+layout.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Em seguida, crie uma nova página e layout dentro do grupo [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Copiar código

Copiar o código para a área de transferência

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Use o tipo genérico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Use o tipo genérico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicializar o Intlayer com a locale da rota  $effect(() => {      setupIntlayer(data.locale);  });    // Usar o dicionário de conteúdo do layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicializar o Intlayer com a locale da rota  $effect(() => {      setupIntlayer(data.locale);  });    // Usar o dicionário de conteúdo do layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Copiar código

Copiar o código para a área de transferência

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usar o dicionário de conteúdo da home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usar o dicionário de conteúdo da home    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opcional) Passo 8: Links Internacionalizados

Para SEO, é recomendado prefixar suas rotas com a localidade (ex: /en/about, /fr/about). Este componente automaticamente prefixa qualquer link com a localidade atual.

src/lib/components/LocalizedLink.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Auxiliar para prefixar URL com a localidade atual  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Auxiliar para prefixar URL com a localidade atual  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Se você usar goto do SvelteKit, pode usar a mesma lógica com getLocalizedUrl para navegar para a URL localizada:

typescript

Copiar código

Copiar o código para a área de transferência

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navega para /en/about ou /fr/about dependendo da localidade

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navega para /en/about ou /fr/about dependendo da localidade

(Opcional) Passo 9: Seletor de Idioma

Para permitir que os usuários mudem de idioma, atualize a URL.

src/lib/components/LanguageSwitcher.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Vai definir a localidade na store e disparar onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Vai definir a localidade na store e disparar onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opcional) Passo 10: Adicionar proxy backend

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opcional) Passo 11: Configurar o editor / CMS do intlayer

Para configurar o editor do intlayer, você deve seguir a documentação do editor intlayer.

Para configurar o CMS do intlayer, você deve seguir a documentação do CMS intlayer.

Para poder visualizar o seletor do editor intlayer, você deverá usar a sintaxe de componente no seu conteúdo intlayer.

Component.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar conteúdo como conteúdo simples -->  <h1>{$content.title}</h1>  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar conteúdo como conteúdo simples -->  <h1>{$content.title}</h1>  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->  {@const Component = $content.component}<Component /></div>

Configuração do Git

É recomendado ignorar os arquivos gerados pelo Intlayer.

.gitignore

Copiar código

Copiar o código para a área de transferência

# Ignorar os arquivos gerados pelo Intlayer.intlayer

# Ignorar os arquivos gerados pelo Intlayer.intlayer

Ir Além

Para poder visualizar o seletor do editor intlayer, você terá que usar a sintaxe de componente no seu conteúdo intlayer.

Component.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar conteúdo como conteúdo simples -->  <h1>{$content.title}</h1>  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar conteúdo como conteúdo simples -->  <h1>{$content.title}</h1>  <!-- Renderizar conteúdo como um componente (requerido pelo editor) -->  {@const Component = $content.component}<Component /></div>

Configuração do Git

É recomendado ignorar os arquivos gerados pelo Intlayer.

.gitignore

Copiar código

Copiar o código para a área de transferência

# Ignorar os arquivos gerados pelo Intlayer.intlayer

# Ignorar os arquivos gerados pelo Intlayer.intlayer

(Opcional) Etapa 1 : Extrair o conteúdo dos seus componentes

Se você tiver uma base de código existente, transformar milhares de arquivos pode ser demorado.

Para facilitar esse processo, o Intlayer propõe um compilador / extrator para transformar seus componentes e extrair o conteúdo.

Para configurá-lo, você pode adicionar uma seção compiler no seu arquivo intlayer.config.ts:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto da sua configuração
  compiler: {
    /**
     * Indica se o compilador deve ser ativado.
     */
    enabled: true,

    /**
     * Define o caminho dos arquivos de saída
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica se os componentes devem ser salvos após serem transformados. Dessa forma, o compilador pode ser executado apenas uma vez para transformar o aplicativo e depois removido.
     */
    saveComponents: false,

    /**
     * Prefixo da chave do dicionário
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Execute o extrator para transformar seus componentes e extrair o conteúdo

bash

Copiar código

Copiar o código para a área de transferência

npx intlayer extract

npx intlayer extract

Atualize seu vite.config.ts para incluir o plugin intlayerCompiler:

vite.config.ts

Copiar código

Copiar o código para a área de transferência

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adiciona o plugin do compilador ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Adiciona o plugin do compilador ],});

bash

Copiar código

Copiar o código para a área de transferência

npm run build # Ou npm run dev

npm run build # Ou npm run dev

Ir Além

Editor Visual: Integre o Editor Visual Intlayer para editar traduções diretamente pela interface.
CMS: Externalize o gerenciamento do seu conteúdo usando o CMS Intlayer.

Vite e Svelte

Vite e Preact