\n```\n\n> Se você quiser usar seu conteúdo em un atributo de `string`, como `alt`, `title`, `href`, `aria-label`, etc., você pode usar o valor da função, como:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Nota sobre a configuração de roteamento:**\n> A estrutura de diretórios que você usa depende da configuração `middleware.routing` no `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (padrão):** mantém o idioma padrão na raiz (sem prefixo) e adiciona prefixos aos outros. Use `[...locale]` para capturar todos os casos.\n> - **`prefix-all`:** todos os URLs recebem um prefixo de idioma. Você pode usar o padrão `[locale]` se não precisar lidar com a raiz separadamente.\n> - **`search-param` ou `no-prefix`:** não são necessários diretórios de idioma. O idioma é tratado via parâmetros de consulta ou cookies.\n\n### Passo 6: Criar um componente Custom Element de Lit\n\nCrie um custom element Lit. Chame `installIntlayer` no `connectedCallback` usando o atributo `locale` do servidor para inicializar o singleton de tradução no lado do cliente.\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // Inicializa com a localidade detectada pelo servidor\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> O atributo `locale` é passado da página Astro (detecção no servidor) e usado para inicializar o `installIntlayer` no `connectedCallback`, definindo o idioma inicial para todos os hooks `ReactiveController` dentro do elemento.\n\n> `useIntlayer` é registrado como um `ReactiveController`. Ele solicita automaticamente uma nova renderização do elemento quando o idioma muda, portanto, nenhuma lógica de inscrição adicional é necessária.\n\n### Passo 7: Adicionar um Seletor de Idioma\n\nA funcionalidade de troca de idioma está integrada diretamente no método `render()` do custom element Lit (veja o passo 6 acima). Ela usa o `useLocale` do `lit-intlayer` e navega para a URL localizada quando um usuário seleciona um novo idioma:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Dentro da classe LitElement, após a configuração do useLocale no passo 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Navega para a URL localizada ao mudar de idioma\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **Nota sobre a reatividade do Lit:**\n> `useLocale` retorna um `ReactiveController`. Quando o `setLocale` é chamado, o controlador solicita automaticamente uma nova renderização, atualizando o estado do botão ativo sem a necessidade de manipulação manual do DOM.\n\n> **Nota sobre persistência:**\n> O uso de `onLocaleChange` para redirecionar via `window.location.href` garante que a nova URL linguística seja visitada, permitindo que o middleware do Intlayer defina o cookie de idioma e lembre da preferência do usuário em visitas futuras.\n\n### Passo 8: Sitemap e Robots.txt\n\nO Intlayer oferece utilitários para criar dinamicamente o seu sitemap localizado e os arquivos robots.txt.\n\n#### Sitemap\n\nO Intlayer vem com um gerador de sitemap integrado para ajudá-lo a criar facilmente um sitemap para sua aplicação. Ele cuida das rotas localizadas e adiciona os metadados necessários para os mecanismos de busca.\n\n> O sitemap gerado pelo Intlayer suporta o namespace `xhtml:link` (Hreflang XML Extensions). Ao contrário dos geradores de sitemap padrão que apenas listam URLs brutos, o Intlayer cria automaticamente os links bidirecionais necessários entre todas as versões de idioma de uma página (por exemplo, `/about`, `/about?lang=fr` e `/about?lang=es`). Isso garante que os mecanismos de busca indexem e sirvam corretamente a versão de idioma certa para o público certo.\n\nCrie `src/pages/sitemap.xml.ts` para gerar um sitemap que inclua todas as suas rotas localizadas.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nCrie `src/pages/robots.txt.ts` para controlar o rastreamento dos motores de busca.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### Configuração do TypeScript\n\nO Intlayer usa o aumento de módulos (module augmentation) para aproveitar o TypeScript, tornando sua base de código mais robusta. Se você usar a sintaxe de decoradores, certifique-se de habilitar `experimentalDecorators` nas suas opções de compilador.\n\n\n\n\n\nCertifique-se de que sua configuração do TypeScript inclua os tipos gerados automaticamente.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Necessário para suporte a decoradores no Lit\n },\n \"include\": [\n // ... sua configuração existente do TypeScript\n \".intlayer/**/*.ts\", // Incluir tipos gerados automaticamente\n ],\n}\n```\n\n### Configuração do Git\n\nRecomenda-se ignorar os arquivos gerados pelo Intlayer. Isso evita committá-los no seu repositório Git.\n\nPara fazer isso, adicione as seguintes instruções ao seu arquivo `.gitignore`:\n\n```bash\n# Ignorar os arquivos gerados pelo Intlayer\n.intlayer\n```\n\n### Extensão do VS Code\n\nPara melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a **extensão oficial do Intlayer para VS Code**.\n\n[Instalação pelo VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nEsta extensão fornece:\n\n- **Preenchimento automático** para chaves de tradução.\n- **Detecção de erros em tempo real** para traduções ausentes.\n- **Visualização inline** do conteúdo traduzido.\n- **Ações rápidas** para criar e atualizar traduções facilmente.\n\nPara mais informações sobre o uso da extensão, consulte a [documentação da Extensão do VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Opcional) Passo 15: 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---\n\n### Aprofunde seu conhecimento\n\nSe quiser saber mais, você também pode implementar o [Editor Visual](/pt/doc/concept/editor) ou usar o [CMS](/pt/doc/concept/cms) para externalizar seu conteúdo.\n","about":"Aprenda como adicionar internacionalização (i18n) ao seu site Astro + Lit com o Intlayer. Siga este guia para tornar seu site multilíngue.","url":"https://intlayer.org/pt/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"internacionalização, documentação, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desenvolvedores, Gerentes de Conteúdo"}}

Criação:2026-04-24Última atualização:2026-05-06