Planner Docs

Appearance

Internationalization ​

Planner supports English and Russian with full interface translation.

Setup ​

  • Library: vue-i18n@9 with Composition API (legacy: false)
  • Plugin: Registered globally in main.ts — $t() available in templates without calling useI18n()
  • Locale persistence: Stored in localStorage.getItem('locale') with fallback to navigator.language.slice(0,2) then 'en'

Translation Files ​

  • src/locales/en.json — ~250 English translation keys
  • src/locales/ru.json — ~250 Russian translation keys

Usage ​

In Templates ​

vue
<template>
  <h3>{{ $t('comments.title') }}</h3>
  <Button :label="$t('comments.save')" />
</template>

In Script ​

typescript
const { t } = useI18n()

const label = t('nav.dashboard')

Language Switcher ​

A LanguageSwitcher.vue component provides EN/RU toggle buttons. Located in Settings under the Appearance section.

typescript
function switchLocale(locale: 'en' | 'ru') {
  localStorage.setItem('locale', locale)
  i18n.global.locale.value = locale
}

Calendar Locale ​

FullCalendar imports the Russian locale from @fullcalendar/core/locales/ru and switches reactively:

typescript
import ruLocale from '@fullcalendar/core/locales/ru'

const calendarLocale = computed(() => 
  i18n.global.locale.value === 'ru' ? ruLocale : undefined
)

Translation Keys Structure ​

app.*              — App-level strings (loading, etc.)
nav.*              — Navigation labels
auth.*             — Login/register
org.*              — Organization pages
team.*             — Team pages
project.*          — Project pages
task.*             — Task management
comments.*         — Comment section
chat.*             — Chat interface
calendar.*         — Calendar view
notifications.*    — Notification center
settings.*         — Settings pages
admin.*            — Admin panel
common.*           — Shared labels (save, cancel, delete, etc.)