From 46b6a875050d83fcdd2ec883499514a87a8364d0 Mon Sep 17 00:00:00 2001 From: Flux_bot Date: Tue, 10 Feb 2026 22:23:30 +0000 Subject: [PATCH] feat: Vue 3 Basis mit TailwindCSS, PrimeVue, i18n und Dark/Light Mode - Vue 3 + Vite Setup - TailwindCSS mit Dark Mode Support - PrimeVue 4 mit Aura Theme - vue-i18n (Deutsch/Englisch) - Vue Router + Pinia - Responsive Navbar mit Theme Toggle & Language Switcher --- .gitignore | 4 ++ README.md | 42 ++++++++++++++++++++- index.html | 13 +++++++ package.json | 27 ++++++++++++++ postcss.config.js | 6 +++ src/App.vue | 13 +++++++ src/components/Navbar.vue | 77 +++++++++++++++++++++++++++++++++++++++ src/locales/de.json | 27 ++++++++++++++ src/locales/en.json | 27 ++++++++++++++ src/main.js | 34 +++++++++++++++++ src/router/index.js | 20 ++++++++++ src/style.css | 15 ++++++++ src/views/AboutView.vue | 12 ++++++ src/views/HomeView.vue | 51 ++++++++++++++++++++++++++ tailwind.config.js | 12 ++++++ vite.config.js | 11 ++++++ 16 files changed, 389 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 src/App.vue create mode 100644 src/components/Navbar.vue create mode 100644 src/locales/de.json create mode 100644 src/locales/en.json create mode 100644 src/main.js create mode 100644 src/router/index.js create mode 100644 src/style.css create mode 100644 src/views/AboutView.vue create mode 100644 src/views/HomeView.vue create mode 100644 tailwind.config.js create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d70bb9c --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +dist +.DS_Store +*.local diff --git a/README.md b/README.md index 0fef37a..3d0ca53 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,41 @@ -# vue3-basis +# Vue3 Basis -Vue 3 Basis mit TailwindCSS, PrimeVUE, i18n und Dark/Light Mode \ No newline at end of file +Eine moderne Vue 3 Starter-Vorlage mit allen wichtigen Features. + +## Features + +- ⚡ **Vite** - Blitzschneller Build +- 🎨 **TailwindCSS** - Utility-first CSS +- 🌙 **Dark/Light Mode** - Automatischer Theme-Switch +- 🌍 **i18n** - Deutsch & Englisch +- 💎 **PrimeVue 4** - UI-Komponenten +- 📦 **Pinia** - State Management +- 🛣️ **Vue Router** - SPA Navigation + +## Installation + +```bash +npm install +npm run dev +``` + +## Build + +```bash +npm run build +``` + +## Struktur + +``` +src/ +├── components/ # Wiederverwendbare Komponenten +├── views/ # Seiten-Komponenten +├── locales/ # Sprachdateien (de, en) +├── router/ # Vue Router Konfiguration +├── stores/ # Pinia Stores +└── composables/ # Composition API Funktionen +``` + +--- +Erstellt von OpenClaw 🤖 diff --git a/index.html b/index.html new file mode 100644 index 0000000..c0836b7 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + Vue3 Basis + + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..a0c70ef --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "name": "vue3-basis", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "vue": "^3.4.0", + "vue-router": "^4.2.0", + "vue-i18n": "^9.9.0", + "pinia": "^2.1.0", + "primevue": "^4.0.0", + "@primevue/themes": "^4.0.0", + "primeicons": "^7.0.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.0.0", + "vite": "^5.0.0", + "tailwindcss": "^3.4.0", + "postcss": "^8.4.0", + "autoprefixer": "^10.4.0" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..fd1dcf5 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue new file mode 100644 index 0000000..3c3258d --- /dev/null +++ b/src/components/Navbar.vue @@ -0,0 +1,77 @@ + + + diff --git a/src/locales/de.json b/src/locales/de.json new file mode 100644 index 0000000..acfdc10 --- /dev/null +++ b/src/locales/de.json @@ -0,0 +1,27 @@ +{ + "nav": { + "toggleTheme": "Theme wechseln" + }, + "home": { + "title": "Willkommen bei Vue3 Basis", + "getStarted": "Loslegen", + "features": { + "fast": { + "title": "Blitzschnell", + "desc": "Mit Vite und Vue 3 für optimale Performance gebaut." + }, + "themes": { + "title": "Dark & Light Mode", + "desc": "Nahtloser Wechsel zwischen hellem und dunklem Design." + }, + "i18n": { + "title": "Mehrsprachig", + "desc": "Vollständige Internationalisierung mit vue-i18n." + } + } + }, + "about": { + "title": "Über uns", + "content": "Vue3 Basis ist eine moderne Starter-Vorlage mit TailwindCSS, PrimeVue und i18n." + } +} diff --git a/src/locales/en.json b/src/locales/en.json new file mode 100644 index 0000000..99507f5 --- /dev/null +++ b/src/locales/en.json @@ -0,0 +1,27 @@ +{ + "nav": { + "toggleTheme": "Toggle theme" + }, + "home": { + "title": "Welcome to Vue3 Basis", + "getStarted": "Get Started", + "features": { + "fast": { + "title": "Lightning Fast", + "desc": "Built with Vite and Vue 3 for optimal performance." + }, + "themes": { + "title": "Dark & Light Mode", + "desc": "Seamless switching between light and dark themes." + }, + "i18n": { + "title": "Multilingual", + "desc": "Full internationalization support with vue-i18n." + } + } + }, + "about": { + "title": "About", + "content": "Vue3 Basis is a modern starter template with TailwindCSS, PrimeVue and i18n." + } +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..6b19dda --- /dev/null +++ b/src/main.js @@ -0,0 +1,34 @@ +import { createApp } from 'vue' +import { createPinia } from 'pinia' +import { createI18n } from 'vue-i18n' +import PrimeVue from 'primevue/config' +import Aura from '@primevue/themes/aura' +import 'primeicons/primeicons.css' +import './style.css' +import App from './App.vue' +import router from './router' +import de from './locales/de.json' +import en from './locales/en.json' + +const i18n = createI18n({ + legacy: false, + locale: localStorage.getItem('locale') || 'de', + fallbackLocale: 'en', + messages: { de, en } +}) + +const app = createApp(App) + +app.use(createPinia()) +app.use(router) +app.use(i18n) +app.use(PrimeVue, { + theme: { + preset: Aura, + options: { + darkModeSelector: '.dark' + } + } +}) + +app.mount('#app') diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..9399306 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,20 @@ +import { createRouter, createWebHistory } from 'vue-router' +import HomeView from '../views/HomeView.vue' + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + path: '/about', + name: 'about', + component: () => import('../views/AboutView.vue') + } + ] +}) + +export default router diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..dbee3f4 --- /dev/null +++ b/src/style.css @@ -0,0 +1,15 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; +} + +body { + @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100; + min-height: 100vh; + transition: background-color 0.3s, color 0.3s; +} diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue new file mode 100644 index 0000000..7226ca6 --- /dev/null +++ b/src/views/AboutView.vue @@ -0,0 +1,12 @@ + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue new file mode 100644 index 0000000..3bcc936 --- /dev/null +++ b/src/views/HomeView.vue @@ -0,0 +1,51 @@ + + + diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..c5f554f --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{vue,js,ts,jsx,tsx}", + ], + darkMode: 'class', + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..70ac6e7 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + '@': '/src' + } + } +})