Internationalisation

SolidBase has built-in i18n support which can be configured in the root config:

const solidBase = createSolidBase(theme);

export default defineConfig({
  ...solidBase.startConfig({
    ...
  }),
  plugins: [
    solidBase.plugin({
      ...
      routes: {
        path: "/{locale}",
        locale: {
          default: "en",
          values: {
            en: { path: "", label: "English", lang: "en-US" },
            fr: { path: "fr", label: "Français", lang: "fr-FR" },
          },
        },
      },
      overrides: [
        {
          locale: "fr",
          themeConfig: {
            ...
          },
        },
      ],
      ...
    }),
  ],
});

Creating Localized Routes

To create localized routes, simply create a folder with the locale code inside the src/routes directory. All files within this folder will be served under the corresponding locale prefix. For example, files in src/routes/fr will be accessible under the /fr path. The default locale (e.g., en) will not have a prefix and will be served from the root path. The folder structure would look like this:

src
└─ routes
   ├─ fr
   │  ├─ index.mdx
   │  └─ about.mdx
   ├─ index.mdx
   └─ about.mdx

Theme Configuration

Similar to the theme configuration for the default locale, you can provide a themeConfig for each locale to customize the theme for that specific language. To learn more about how to adjust the theme configuration, refer to the Theme Configuration section within the config page.

Locale API

The default theme and custom themes can keep using useLocale() for locale-specific UI.

When routes.locale is configured, useLocale().locales is derived from the current route selection. For example, if /router only includes English and French, the locale selector only receives those two locales even if another project also includes Spanish.

Use the generic route APIs when custom UI needs to read non-locale route axes such as project or version.