Localization

The Kanban widget ships with English labels by default - editor field names, priority options, toolbar and context-menu text, and ARIA labels. To display the widget in another language, wrap it in a Locale component and pass a merged dictionary that covers both the kanban-specific keys and the shared core keys (calendar names, button labels, date formats).

Column labels, card titles, and other user-supplied data aren't part of the locale system. You translate those yourself, the same way you'd handle any app-level strings.

Default Locale

Without any locale setup, the widget uses built-in English labels. This is a valid configuration - no extra imports needed.

<script setup>
import { Kanban } from "@svar-ui/vue-kanban";
</script>

<template>
  <Kanban :cards="cards" :columns="columns" />
</template>

Using an Existing Locale

The package provides ready-made translations for Chinese, German, Spanish, French, Italian, Japanese, Portuguese, and Russian. Import the kanban locale from @svar-ui/kanban-locales and the core locale from @svar-ui/core-locales, merge them, and pass the result to Locale.

<script setup>
import { Locale } from "@svar-ui/vue-core";
import { Kanban } from "@svar-ui/vue-kanban";
import { de } from "@svar-ui/kanban-locales";
import { de as deCore } from "@svar-ui/core-locales";

const words = { ...de, ...deCore };
</script>

<template>
  <Locale :words="words">
    <Kanban :cards="cards" :columns="columns" />
  </Locale>
</template>

Both dictionaries are required. The kanban locale covers editor labels, menu items, toolbar text, and priority names. The core locale covers shared UI strings - calendar month/day names, date formats, and common button labels like "OK" and "Cancel".

Custom Locale

To override a few labels without replacing the entire dictionary, spread the default locale and replace only the keys you need.

<script setup>
import { Locale } from "@svar-ui/vue-core";
import { Kanban } from "@svar-ui/vue-kanban";
import { en } from "@svar-ui/kanban-locales";
import { en as enCore } from "@svar-ui/core-locales";

const words = {
  ...en,
  ...enCore,
  kanban: {
    ...en.kanban,
    Priority: "Urgency",
    Low: "Minor",
    Medium: "Normal",
    High: "Critical",
  },
};
</script>

<template>
  <Locale :words="words">
    <Kanban :cards="cards" :columns="columns" />
  </Locale>
</template>

Always spread the base locale first so you don't lose unset keys.

Switching Language at Runtime

Make the words object reactive and re-key the Locale wrapper when the language changes. The :key binding forces the widget to re-mount with the new strings.

<script setup>
import { ref, computed } from "vue";
import { Locale } from "@svar-ui/vue-core";
import { Kanban } from "@svar-ui/vue-kanban";
import { en, de, fr } from "@svar-ui/kanban-locales";
import { en as enCore, de as deCore, fr as frCore } from "@svar-ui/core-locales";

const dictionaries = {
  en: { ...en, ...enCore },
  de: { ...de, ...deCore },
  fr: { ...fr, ...frCore },
};

const locale = ref("en");
const words = computed(() => dictionaries[locale.value]);
</script>

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="de">German</option>
    <option value="fr">French</option>
  </select>

  <Locale :words="words" :key="locale">
    <Kanban :cards="cards" :columns="columns" />
  </Locale>
</template>

Locale Object Reference

The kanban locale (@svar-ui/kanban-locales) contains a single kanban key with flat string entries:

Group	Keys	Used in
Editor field labels	Title, Description, Priority, Progress, Deadline, Tags, Users	Editor sidebar/modal
Priority options	Low, Medium, High	Priority picker, card badge
Editor actions	Delete	Editor top bar
Toolbar	Sort, Title A-Z, Title Z-A, Priority Low-High, Priority High-Low, Clear sorting	Toolbar sort menu
Context menu	Edit card, Duplicate card, Delete card	Right-click menu
ARIA labels	Kanban board, Expand column, Collapse column, Add card to, Card menu, Attachments, Comments, Card	Screen readers

The core locale (@svar-ui/core-locales) adds calendar (month and day names), formats (date/time format strings like %m/%d/%Y), and core (shared button labels like OK, Cancel, Select).