\n\n\n```\n\n> The `locale` prop is passed from the Astro page (server-detected) and used to initialise `installIntlayer`, which makes it the initial locale for all composables in the component tree.\n\n### Step 7: Add a Locale Switcher\n\nThe locale switcher is embedded directly in the Vue island template (shown in Step 6). It uses `useLocale` from `vue-intlayer` and navigates to the localized URL when the user picks a new language:\n\n```vue fileName=\"src/components/vue/VueIsland.vue\"\n\n\n\n```\n\n> **Note on Persistence:**\n> Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.\n\n### Step 8: Sitemap and Robots.txt\n\nIntlayer provides utilities to generate localized sitemaps and robots.txt files dynamically.\n\n#### Sitemap\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nCreate `src/pages/sitemap.xml.ts` to generate a sitemap that includes all your localized routes.\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\nCreate `src/pages/robots.txt.ts` to control search engine crawling.\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### Configure TypeScript\n\nIntlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.\n\n\n\n\n\nEnsure your TypeScript configuration includes the autogenerated types.\n\n```json5 fileName=\"tsconfig.json\"\n{\n // ... Your existing TypeScript configurations\n include: [\n // ... Your existing TypeScript configurations\n \".intlayer/**/*.ts\", // Include the auto-generated types\n ],\n}\n```\n\n### Git Configuration\n\nIt is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.\n\nTo do this, you can add the following instructions to your `.gitignore` file:\n\n```bash\n# Ignore the files generated by Intlayer\n.intlayer\n```\n\n### VS Code Extension\n\nTo improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.\n\n[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nThis extension provides:\n\n- **Autocompletion** for translation keys.\n- **Real-time error detection** for missing translations.\n- **Inline previews** of translated content.\n- **Quick actions** to easily create and update translations.\n\nFor more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Optional) Step 15: Extract the content of your components\n\nIf you have an existing codebase, transforming thousands of files can be time-consuming.\n\nTo ease this process, Intlayer propose a [compiler](/doc/compiler) / [extractor](/doc/concept/cli/extract) to transform your components and extract the content.\n\nTo set it up, you can add a `compiler` section in your `intlayer.config.ts` file:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Rest of your config\n compiler: {\n /**\n * Indicates if the compiler should be enabled.\n */\n enabled: true,\n\n /**\n * Defines the output files path\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indicates if the components should be saved after being transformed.\n *\n * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.\n *\n * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.\n */\n saveComponents: false,\n\n /**\n * Dictionary key prefix\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nRun the extractor to transform your components and extract the content\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\nUpdate your `vite.config.ts` to include the `intlayerCompiler` plugin:\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(), // Adds the compiler plugin\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Or 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### Go Further\n\nTo go further, you can implement the [visual editor](/doc/concept/editor) or externalize your content using the [CMS](/doc/concept/cms).\n","about":"Learn how to add internationalization (i18n) to your Astro + Vue website using Intlayer. Follow this guide to make your site multilingual.","url":"https://intlayer.org/doc/environment/astro/vue","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"Internationalization, Documentation, Intlayer, Astro, Vue, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Developers, Content Managers"}}

Creation:2026-04-24Last update:2026-05-06