4.6 KiB

Raw Blame History

Phase 10: i18n (Internationalization)

Status: ⏳ Todo Progress: 0/8 tasks (0%) Started: - Completed: - Assigned to: -

Overview

Implement internationalization (i18n) with @nuxtjs/i18n: support German (default) and English, translate all UI strings, and create language switcher.

Goal: App is fully bilingual (German + English) with proper routing and formatting.

Dependencies

✅ Phase 1-9: Most UI components should be created by now

Tasks

Setup

Install @nuxtjs/i18n
```
pnpm add @nuxtjs/i18n
```

Configure i18n module

File: nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'de', iso: 'de-DE', name: 'Deutsch', file: 'de-DE.json' },
      { code: 'en', iso: 'en-US', name: 'English', file: 'en-US.json' },
    ],
    defaultLocale: 'de',
    strategy: 'prefix_except_default',
    langDir: 'locales',
    lazy: true,
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
    },
  },
})

Translation Files

Create locale files (de-DE.json, en-US.json)

Create: locales/de-DE.json (German)
Create: locales/en-US.json (English)
Structure:

{
  "common": {
    "header": { "home": "Startseite", "products": "Produkte", ... },
    "footer": { ... },
    "buttons": { "submit": "Absenden", "cancel": "Abbrechen", ... }
  },
  "auth": {
    "login": { "title": "Anmelden", "email": "E-Mail", ... },
    "register": { ... }
  },
  "products": { ... },
  "cart": { ... },
  "checkout": { ... },
  "errors": { ... }
}

Translate all UI strings
- Go through all components and pages
- Replace hardcoded German strings with $t('key') or t('key')
- Add translations to both de-DE.json and en-US.json
- Components to translate:
  - Header, Footer
  - Auth forms (Login, Register)
  - Product list, Product detail
  - Cart, CartItem, CartSummary
  - Checkout form
  - PayPal button texts
  - Error messages
  - Success messages
  - Validation messages (VeeValidate)

UI Components

Create language switcher component
- File: components/Common/LanguageSwitcher.vue
- Dropdown or toggle: 🇩🇪 Deutsch | 🇬🇧 English
- Uses: $i18n.locale and $switchLocalePath()
- Place in header
- Styling: shadcn-nuxt DropdownMenu or simple buttons

Testing

Test route localization
- Visit /produkte (German)
- Switch to English → should redirect to /en/products
- Test all main routes:
  - / → /en/ (homepage)
  - /produkte → /en/products
  - /warenkorb → /en/cart
  - /kasse → /en/checkout
- Verify route parameters preserved (/produkte/[id] → /en/products/[id])

Test currency/date formatting

Use Intl.NumberFormat for currency (EUR)
Use Intl.DateTimeFormat for dates
Example in component:

const { locale } = useI18n()
const formatPrice = (price: number) => {
  return new Intl.NumberFormat(locale.value, {
    style: 'currency',
    currency: 'EUR',
  }).format(price)
}

Test: German → "19,99 €", English → "€19.99"

Document i18n structure
- Document translation file structure
- Document how to add new translations
- Document naming conventions for translation keys
- Document how language switcher works
- Document how to format currency/dates per locale

Acceptance Criteria

@nuxtjs/i18n is installed and configured
Locale files exist for German and English
All UI strings are translated (no hardcoded German text)
Language switcher component is functional
Can switch between German and English
Routes change with language (/produkte ↔ /en/products)
Currency formatting respects locale
Date formatting respects locale
i18n structure is documented

Notes

Default Language: German (de)
Route Strategy: prefix_except_default (German has no prefix, English has /en/)
SEO: Automatic hreflang tags for SEO
Lazy Loading: Translation files loaded on demand
Browser Detection: Redirects to browser language on first visit (if supported)

Blockers

None currently

4.6 KiB Raw Blame History