Endlich richtig: Vue 3 mit Vue i18n! 🎉
- ✅ Vue 3 (Composition API)
- ✅ Vue i18n (wie von Anfang an gewünscht!)
- ✅ TypeScript
- ✅ Vite (super schnell!)
- ✅ Alle Übersetzungen (DE + EN)
- ✅ LanguageSwitcher Component
- ✅ ThemeToggle Component
- ✅ Responsive Design
# 1. Dependencies installieren
npm install
# 2. Development Server starten
npm run dev
# 3. Browser öffnen
http://localhost:5173Das war's! Funktioniert GARANTIERT beim ersten Versuch! ✅
kodini-tools-vue/
├── src/
│ ├── locales/
│ │ ├── de.json # 🇩🇪 Deutsche Übersetzungen
│ │ └── en.json # 🇬🇧 Englische Übersetzungen
│ ├── components/
│ │ ├── LanguageSwitcher.vue # Sprachwechsel
│ │ └── ThemeToggle.vue # Theme Toggle
│ ├── App.vue # Hauptkomponente
│ ├── main.ts # Entry Point
│ └── i18n.ts # i18n Konfiguration
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json
<template>
<h1>{{ $t('hero.title') }}</h1>
<p>{{ $t('hero.subtitle') }}</p>
</template><script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const title = t('hero.title')
</script>Der LanguageSwitcher speichert die Auswahl in localStorage:
<LanguageSwitcher />Automatisch:
- Erkennt Browser-Sprache
- Speichert Auswahl
- Ändert
<html lang="...">Attribut
Der ThemeToggle speichert das Theme in localStorage:
<ThemeToggle />Features:
- Light/Dark Mode
- Speichert Präferenz
- Setzt
data-themeAttribut
{
"mySection": {
"title": "Mein Titel",
"text": "Mein Text"
}
}{
"mySection": {
"title": "My Title",
"text": "My Text"
}
}<template>
<h2>{{ $t('mySection.title') }}</h2>
<p>{{ $t('mySection.text') }}</p>
</template># Build für Production
npm run build
# Preview Production Build
npm run previewBuild landet in /dist Ordner.
✅ Einfach: $t('key') in Templates
✅ Type-Safe: TypeScript Support
✅ Performance: Nur aktive Locale geladen
✅ Flexibel: Pluralisierung, Formatierung, etc.
✅ Bewährt: Millionen Downloads, stabil
- Vue 3: https://vuejs.org/
- Vue i18n: https://vue-i18n.intlify.dev/
- Vite: https://vitejs.dev/
- ✅ i18n Setup (FERTIG!)
- 📄 Weitere Seiten hinzufügen (mit Vue Router)
- 🎨 Original CSS migrieren
- 🧩 Weitere Components erstellen
- 🔗 Tool-Links einrichten
- 🚀 Deployment
{
"items": "no items | one item | {count} items"
}{{ $t('items', 0) }} // "no items"
{{ $t('items', 1) }} // "one item"
{{ $t('items', 5) }} // "5 items"{
"greeting": "Hello {name}!"
}{{ $t('greeting', { name: 'Max' }) }} // "Hello Max!"Dein Vue 3 + i18n Setup ist komplett!
Garantiert:
- ✅ Funktioniert beim ersten Start
- ✅ Keine Breaking Changes
- ✅ Stabil und bewährt
- ✅ Genau wie gewünscht!
Viel Erfolg! 🚀