Skip to content
I18n for Astro

Framework components

Framework components are a bit tricky to work with. Prefer using this package in Astro components. It mainly depends on if you use a client directive and which one.

Cases

No client directive

You don’t need to do anything! It will be rendered on the server so you can even call setDynamicParams.

load, idle, visible and media

If you’re using client:load, client:idle, client:visible or client:media, you need to use the utilities within your component. This requires enabling client features.

src/components/Test.tsx
1
import { getLocale } from "i18n:astro"
2


3
const locale = getLocale()
4


5
export default function Test() {
6
    const locale = getLocale()
7


8
    return <div>{locale}</div>
9
}

client:only

If you’re using client:only, client:idle, client:visible or client:media, you can use the utilities anywhere in the file. This requires enabling client features.

src/components/Test.tsx
1
import { getLocale } from "i18n:astro"
2


3
const locale = getLocale() // valid
4


5
export default function Test() {
6
    const locale = getLocale() // valid
7


8
    return <div>{locale}</div>
9
}