\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 setup:**\n> The directory structure you use depends on the `middleware.routing` setting in `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (default):** keeps the default language at the root (no prefix) and prefixes others. Use `[...locale]` to catch all cases.\n> - **`prefix-all`:** all URLs get a language prefix. You can use standard `[locale]` if you don't need to handle the root separately.\n> - **`search-param` or `no-prefix`:** no language directories are needed. The language is handled via query parameters or cookies.\n\n### Step 6: Create a Lit Custom Element Component\n\nCreate a Lit custom element. Call `installIntlayer` in the `connectedCallback` using the server-based `locale` attribute to initialise the client-side translation singleton.\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 // Initialise with 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` attribute is passed from the Astro page (server detection) and used to initialise `installIntlayer` in the `connectedCallback`, which sets the initial language for all `ReactiveController` hooks within the element.\n\n> `useIntlayer` is registered as a `ReactiveController`. It automatically requests an element re-render when the language changes, so no additional subscription logic is required.\n\n### Step 7: Add a Language Switcher\n\nThe language switching functionality is integrated directly within the Lit custom element's `render()` method (see step 6 above). It uses `useLocale` from `lit-intlayer` and navigates to the localised URL when a user selects a new language:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Inside the LitElement class, after useLocale setup in step 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Navigate to the localised URL on language 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 automatically requests a re-render, updating the active button state without manual DOM manipulation.\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. If you use decorator syntax, ensure you enable `experimentalDecorators` in your compiler options.\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 for decorator support in Lit\n },\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 + Lit site with Intlayer. Follow this guide to make your site multilingual.","url":"https://intlayer.org/en-GB/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"internationalisation, 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