EN | 中文

Astro-i18n plus is an international plugin that automates basic operations without the need for manual page management or interference with your src directory.

• Zero Configuration There are no additional configurations, you just need to focus on your own business and not worry about translation issues.
• Automatically load language files Drop *. json in public/locales/ to automatically load the language list
• No need to maintain multiple template pages Automatic maintenance of multilingual templates
• Not polluting the project In the past, internationalized components would generate multiple sets of templates under src, which seemed uncomfortable

Getting Started

You don't need to package it into the project, just generate it locally.

npm i astro-i18n-plus -D

If your root directory looks like this

/public/locales
    - zh.json
    - en.json
    - ru.json
/src/pages
    - index.astro

Usage

step1

// astro.config.mjs
import astroI18nPlus from 'astro-i18n-plus';
export default defineConfig({
    integrations:[astroI18nPlus('en'),]
});

step2

npm run dev

These files will be generated in the .temp directory(The default language will be ignored),Git can ignore them.

/.temp
    - zh
        - index.astro
    - ru
        - index.astro

step3

In *.astro file,Can be used directly without specifying a language,Remember to initialize it before using the t function

// typescript
---
import { t,initLocale } from "astro-i18n-plus";
initLocale(Astro);
---

<!-- html -->
<h1>{t("title")}</h1>

Client usage introduction

Just use it directly(vue,react,html...)

interface I18nClient {
    messages: Map<string, any>
    locales: string[]
    default: string
    locale: string
    t:(k:string)=>string
}
// react
export default ()=>{
    const {t} = window.I18nClient
    return <div className="p-4 my-4 bg-slate-800">
        {t('clienti18n.title')}
    </div>
}