Astro
ShipEasyI18n integration for Astro — no package needed, use the CDN script tag, detect SSR profiles from Astro.request, and inject inline label data via define:vars.
No npm package is required for Astro. ShipEasyI18n works via the CDN script tag and Astro's native SSR APIs.
Script tag (static sites)
Add the loader to your base layout:
---
// src/layouts/BaseLayout.astro
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Site</title>
<script
src="https://cdn.i18n.shipeasy.ai/v1/loader.js"
data-key="i18n_pk_your_key_here"
data-profile="en:prod"
is:inline
></script>
</head>
<body>
<slot />
</body>
</html>Use is:inline to prevent Astro from processing the script — the ShipEasyI18n loader uses data-* attributes that must stay on the element.
SSR — detect profile from request
In SSR mode (output: 'server'), read the profile from a cookie or header:
---
// src/layouts/BaseLayout.astro
const profile =
Astro.cookies.get('i18n_profile')?.value ?? 'en:prod';
---
<script
src="https://cdn.i18n.shipeasy.ai/v1/loader.js"
data-key="i18n_pk_your_key_here"
data-profile={profile}
is:inline
></script>Inline label data with define:vars
Fetch label data on the server and embed it in the page to avoid a client-side round-trip:
---
// src/layouts/BaseLayout.astro
const res = await fetch(
`https://cdn.i18n.shipeasy.ai/v1/labels?key=${import.meta.env.ShipEasyI18n_KEY}&profile=en:prod&chunk=index`
);
const i18nData = await res.json();
---
<script define:vars={{ i18nData }}>
window.__ShipEasyI18n_INLINE__ = i18nData;
</script>
<script
src="https://cdn.i18n.shipeasy.ai/v1/loader.js"
data-key="i18n_pk_your_key_here"
data-profile="en:prod"
data-inline="__ShipEasyI18n_INLINE__"
is:inline
></script>Using labels in .astro components
For server-rendered text, call the ShipEasyI18n REST API directly and render values into markup:
---
const res = await fetch(
`https://cdn.i18n.shipeasy.ai/v1/labels?key=${import.meta.env.ShipEasyI18n_KEY}&profile=en:prod&chunk=index`
);
const labels: Record<string, string> = await res.json();
const t = (key: string) => labels[key] ?? key;
---
<nav>
<a href="/">{t('nav.home')}</a>
<a href="/account">{t('nav.account')}</a>
</nav>For Astro islands using React, Vue, or Svelte, use the corresponding framework package (@i18n/react, @i18n/vue, @i18n/svelte) inside the island component.
For the full implementation spec including package source code and edge cases, see plans/frameworks/astro.md in the repository.