\n\n\n```\n\n> A prop `locale` é passada da página Astro (detecção no servidor) e usada para inicializar o `installIntlayer`, definindo o idioma inicial para todos os composables na árvore.\n\n### Passo 7: Adicionar um Seletor de Idioma\n\nA funcionalidade de troca de idioma está integrada diretamente no template da island de Vue (veja o passo 6 acima). Ela usa o composable `useLocale` do `vue-intlayer` e navega para a URL localizada quando um usuário seleciona um novo idioma:\n\n```vue fileName=\"src/components/vue/VueIsland.vue\"\n\n\n\n```\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.\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 // ... sua configuração existente do TypeScript\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 + Vue com o Intlayer. Siga este guia para tornar seu site multilíngue.","url":"https://intlayer.org/pt/doc/environment/astro/vue","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"internacionalização, documentação, Intlayer, Astro, Vue, 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