Internationalization

Plugins use the SDK's internationalization utilities to follow Kite's language setting. English translations are required; all other languages are optional. Each missing translation falls back to English.

Translation Files

The scaffolding tool generates src/locales/en.json and src/locales/zh.json by default. English is the base language. For example, en.json:

{
  "navigation": {
    "workloads": "Workload tools",
    "deployment": "Deployment"
  },
  "actions": {
    "refresh": "Refresh {{name}}"
  }
}

Configure Internationalization

Import the translation files and call createPluginI18n() in src/i18n.ts:

import { createPluginI18n } from '@kite-dev/plugin-sdk/i18n'

import en from './locales/en.json'
import zh from './locales/zh.json'

export const {
  resources: translations,
  label,
  useTranslation,
} = createPluginI18n({ en, zh })

createPluginI18n provides two ways to use translations:

• label(key): use it for route titles, menu labels, and tab labels in plugin.config.tsx.
• useTranslation(): use it in page components to resolve keys in the current language, with English as the fallback.

Use label in Configuration

import { lazy } from 'react'
import { definePlugin } from '@kite-dev/plugin-sdk'

import { label, translations } from './src/i18n'

const WorkloadsPage = lazy(() => import('./src/pages/workloads'))

export default definePlugin({
  i18n: translations,
  routes: [
    {
      id: 'workloads',
      path: '',
      title: label('navigation.workloads'),
      element: <WorkloadsPage />,
    },
  ],
  menus: [
    {
      id: 'workloads',
      label: label('navigation.workloads'),
      route: 'workloads',
    },
  ],
})

Use t in Pages

Import useTranslation from your local src/i18n.ts in page components:

import { Button } from '@kite-dev/plugin-sdk/ui'

import { useTranslation } from '../i18n'

export function RefreshButton({
  name,
  onClick,
}: {
  name: string
  onClick: () => void
}) {
  const { t } = useTranslation()
  return <Button onClick={onClick}>{t('actions.refresh', { name })}</Button>
}

• Keys passed to t('key') have TypeScript autocomplete.
• Use t('key', { name }) to interpolate in a message. i18next plural syntax is also supported.
• The hook also returns language, such as zh or en, for localized date and number formatting.

Behavior

• Page translations load with the plugin. You do not need to register a namespace manually. Kite removes the translations when the plugin is disabled.
• Any non-English language may omit individual keys or entire nested groups, or be omitted altogether. Missing text falls back to en.json without causing a build failure.
• Page translations missing from both the current language and English display the raw key, such as actions.refresh.