intlayer Astro Integration Documentation

The intlayer integration for Astro configures your project for multilingual internationalization (i18n). It handles build-time dictionary preparation, Vite plugin injection, automatic request middleware registration, and emitting localized prerendered pages.

Usage

Add intlayer() to your astro.config.mjs:

import { defineConfig } from "astro/config";
import { intlayer } from "astro-intlayer";

export default defineConfig({
  integrations: [intlayer()],
});

Astro CLI's codemod (astro add astro-intlayer) also generates a default import which is supported:

import intlayer from "astro-intlayer";

Description

The integration hooks into Astro's build and runtime lifecycle:

1. Config Setup (astro:config:setup):
   • Dictionary Preparation: Prepares Intlayer dictionaries and generated types before the build runs.
   • Vite Plugins: Injects plugins for Vite aliases (enabling seamless dictionary imports), locale routing proxies, and build pruning.
   • Middleware Registration: Automatically injects astro-intlayer/middleware into your project's middleware chain, populating Astro.locals.intlayer on every incoming request.
2. Build Done (astro:build:done):
   • Page Rewrites: Inspects localized URL rewrite rules and emits prerendered HTML pages at their corresponding localized paths.

What is Provided Out of the Box

Once configured, your Astro application can immediately use:

• The useIntlayer, useDictionary, and useLocale hooks inside .astro component frontmatter.
• The Astro.locals.intlayer object in Astro endpoints and pages.
• Client-side imports in <script> blocks that mirror the same API with reactive updates.
• Built-in formatters under astro-intlayer/format (useDate, useNumber, useCurrency, etc.).

Related Documentation