\n\n\n```\n\n> The `locale` prop is passed from the Astro page (server detection) and used to initialise `installIntlayer`, setting the initial language for all composables within the tree.\n\n### Step 7: Add a Language Switcher\n\nThe language switching functionality is integrated directly within the Vue island template (see step 6 above). It uses the `useLocale` composable from `vue-intlayer` and navigates to the localised URL when a user selects 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 the new linguistic URL is visited, allowing the Intlayer middleware to set the language cookie and remember the user's preference in future visits.\n\n### Step 8: Sitemap and Robots.txt\n\nIntlayer offers utilities to dynamically create your localised sitemap and robots.txt files.\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 including all your localised 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### TypeScript Configuration\n\nIntlayer uses module augmentation to leverage TypeScript, making your codebase more robust.\n\n\n\n\n\nEnsure your TypeScript configuration includes the autogenerated types.\n\n```json5 fileName=\"tsconfig.json\"\n{\n // ... your existing TypeScript configuration\n \"include\": [\n // ... your existing TypeScript configuration\n \".intlayer/**/*.ts\", // Include autogenerated types\n ],\n}\n```\n\n### Git Configuration\n\nIt is recommended to ignore the files generated by Intlayer. This avoids committing them to your Git repository.\n\nTo do this, 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[Installation 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 preview** of translated content.\n- **Quick actions** for easily creating and updating translations.\n\nFor more information on using the extension, refer to the [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](/en-GB/doc/compiler) / [extractor](/en-GB/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### Deepen Your Knowledge\n\nIf you want to learn more, you can also implement the [Visual Editor](/en-GB/doc/concept/editor) or use the [CMS](/en-GB/doc/concept/cms) to externalise your content.\n","about":"Learn how to add internationalisation (i18n) to your Astro + Vue site with Intlayer. Follow this guide to make your site multilingual.","url":"https://intlayer.org/en-GB/doc/environment/astro/vue","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"internationalisation, 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