Scan to join WeChat groupIntlayer Astro Usage
Setup
The intlayer() integration in astro.config.ts builds the dictionaries and adds a middleware that resolves the locale of every request into Astro.locals.intlayer.
Server-side (Astro Components)
---
import { useIntlayer, useLocale } from "astro-intlayer";
// Locale resolved by the middleware (e.g. /es/about -> 'es')
const { locale } = useLocale();
const content = useIntlayer("my-dictionary-key");
---
<h1>{content.title}</h1>
Framework Islands
Islands use their framework package (react-intlayer, vue-intlayer, svelte-intlayer, solid-intlayer, preact-intlayer, lit-intlayer) and receive the server-detected locale as a prop.
Compiler
The Intlayer Compiler can extract all your content keys from your components, using one CLI command (npx intlayer extract) or automatically at app build.