astro-i18n-routes v1.0.0

astro-i18n-routes

An astro integration to sync i18n pages.

How to use

Install the package

npm install astro-i18n-routes

Add environment variable

Generate an OPENAI api key here and add it to the dotenv file.

OPENAI_KEY="..."

Update astro.config.mjs

import { defineConfig } from "astro/config";
import i18n from 'astro-i18n-routes/plugin';

export default defineConfig({
  integrations: [
    i18n({
      defaultLocale: 'en',
      locales: [
        { code: 'en', name: 'English' },
        { code: 'fr', name: 'Français' },
      ],
    }),
  ],
});

Translate paths and texts

Create the page src/routes/locale/index.astro.

---
import i18n from "astro-i18n-routes/instance";
import { getLocaleDataFromUrl } from "astro-i18n-routes/utils";

i18n.locale = getLocaleDataFromUrl(Astro.url);
---

<a href={i18n.path("dashboard")}>{i18n.text("Dashboard")}</a>

Translate client-side (optional)

Add the client snippet in to support i18n with client:load and client:only directives.

---
import { I18nClient } from "astro-i18n-routes/components";
---

<I18nClient url={Astro.url} />

Reference

Config options