Usage

Update the integration configuration

This package has a few required options:

1
import { defineConfig } from "astro/config"
2
import i18n from "@astrolicious/i18n"
3

4
export default defineConfig({
5
    integrations: [
6
        i18n({
7
            defaultLocale: "en",
8
            locales: ["en", "fr"] // must include the default locale
9
        })
10
    ]
11
})

There are many convenient options, check out the reference below to learn more.

Configuration

Structure

Directorysrc/
- Directorylocales/ Data used for translations
  - Directoryen/
    common.json
  - Directoryfr/
    common.json
- Directorypages/ Not managed by the package
  - custom.astro Accessible at /custom
  - Directoryapi/
    hello.ts Accessible at /api/hello
- Directoryroutes/ Managed by the package
  - index.astro Accessible at / and /fr by default
  - blog.astro Accessible at /blog and /fr/blog by default

Import the utilities

Utilities can be imported from i18n:astro inside routes, pages and middlewares:

1
---
2
import { getLocale } from "i18n:astro"
3

4
const locale = getLocale()
5
---

Have a look at the reference to see what you can do!

Client usage

Using utilities from i18n:astro on the client is opt-in. You need 2 things:

Import the <I18nClient /> component, likely in your layout:

1
---
2
import I18nClient from "@astrolicious/i18n/components/I18nClient.astro"
3
---
4
<html>
5
<head>
6
    <meta charset="utf-8" />
7
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
8
    <meta name="viewport" content="width=device-width" />
9
    <meta name="generator" content={Astro.generator} />
10
    <I18nClient />
11
    <slot name="head" />
12
</head>
13
<body>
14
    <slot />
15
</body>
16
</html>

Enable client features in the integration configuration:

1
import { defineConfig } from "astro/config"
2
import i18n from "@astrolicious/i18n"
3

4
export default defineConfig({
5
    integrations: [
6
        i18n({
7
            defaultLocale: "en",
8
            locales: ["en", "fr"],
9
            client: {
10
                data: true,
11
                // paths: true,
12
                // translations
13
            }
14
        })
15
    ]
16
})

Learn more about it works below!

Client usage