\n```\n\n> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Note on Routing Configuration:**\n> The directory structure you use depends on the `middleware.routing` setting in your `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (default):** Keeps the default locale at the root (no prefix) and prefixes others. Use `[...locale]` to catch all cases.\n> - **`prefix-all`:** All URLs are prefixed with the locale. You can use standard `[locale]` if you don't need to handle the root separately.\n> - **`search-param` or `no-prefix`:** No locale folder is needed. The locale is handled via search parameters or cookies.\n\n### Step 6: Create the Lit custom element\n\nCreate the Lit custom element. `installIntlayer` is called in `connectedCallback` with the server-detected `locale` property to initialize the Intlayer singleton on the client.\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 // Initialize with the server-detected locale\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> The `locale` property is passed from the Astro page (server-detected) and used in `connectedCallback` to initialise `installIntlayer`, making it the initial locale for all `ReactiveController` hooks in the element.\n\n> `useIntlayer` registers itself as a `ReactiveController`. The element re-renders automatically when the locale changes - no extra setup required.\n\n### Step 7: Add a Locale Switcher\n\nThe locale switcher is embedded directly in the Lit custom element's `render()` method (shown in Step 6). It uses `useLocale` from `lit-intlayer` and navigates to the localized URL when the user picks a new language:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Within the LitElement class, after useLocale setup (shown in Step 6):\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Navigate to the localized URL on locale change\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> **Note on Lit Reactivity:**\n> `useLocale` returns a `ReactiveController`. When `setLocale` is called, the controller schedules a re-render automatically - so the active button state updates without manual DOM manipulation.\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. Lit requires `experimentalDecorators` to be enabled if you use the decorator syntax.\n\n\n\n\n\nEnsure your TypeScript configuration includes the autogenerated types.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Required by Lit for decorator support\n },\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 + Lit website using Intlayer. Follow this guide to make your site multilingual.","url":"https://intlayer.org/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"Internationalization, Documentation, Intlayer, Astro, Lit, Web Components, 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