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.
1import { getLocale } from "i18n:astro"2
3const locale = getLocale()4
5export 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.
1import { getLocale } from "i18n:astro"2
3const locale = getLocale() // valid4
5export default function Test() {6 const locale = getLocale() // valid7
8 return <div>{locale}</div>9}