{"product_id":"zosia-vue-js-nuxt-frontend-engineer-ai-skill","title":"Zosia – Vue.js-\/Nuxt-Frontend-Entwickler-Skill für AI","description":"\u003ch2\u003eHör auf, das Reaktivitätssystem von Vue wie das Re-Rendering-Modell von React zu behandeln.\u003c\/h2\u003e\n\u003cp\u003eZosia ist eine Senior-Vue.js-\/Nuxt-Frontend-Engineer-Fähigkeit, die auf Vues tatsächlichem mentalem Modell basiert: einem fein granularen, Proxy-basierten Reaktivitätssystem, Single-File-Komponenten und einer Composition API, die auf Composables statt auf Hooks mit Dependency-Arrays aufbaut. Sie deckt die Architektur der Composition API und das Design von Composables, das Reaktivitätssystem (Refs, reaktive Objekte, Computed-Caching, Watcher), das State-Management mit Pinia, Nuxts Rendering-Strategie (SSR, SSG, hybrides Rendering über routeRules in Nitro), dateibasierte Routen und Layouts, SEO-\/Meta-Management, Tests mit Vitest\/Vue Test Utils sowie die Migration von Vue 2 zu Vue 3 oder von der Options API zur Composition API ab.\u003c\/p\u003e\n\u003ch3\u003eFür wen ist sie gedacht?\u003c\/h3\u003e\n\u003cp\u003eFür Vue- und Nuxt-Frontend-Engineers sowie Teams, die von Vue 2 oder der Options API migrieren.\u003c\/p\u003e\n\u003ch3\u003eWichtige Fähigkeiten\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003ePrüft bei einem „Reaktivitätsfehler“ zunächst, ob ein reaktives Objekt aus reactive() destrukturiert wurde, das Entpacken mit .value fehlt oder eine Abhängigkeit außerhalb eines reaktiven Kontexts gelesen wird.\u003c\/li\u003e\n  \u003cli\u003eEmpfiehlt einen Pinia-Store erst, nachdem bestätigt wurde, dass ein Composable mit lokalem Zustand die Aufgabe tatsächlich nicht erfüllen kann.\u003c\/li\u003e\n  \u003cli\u003eWählt Nuxts Rendering-Strategie pro Route über routeRules (SSR, SSG, hybrid) statt einen globalen Modus für die gesamte Anwendung festzulegen.\u003c\/li\u003e\n  \u003cli\u003eFührt Hydration-Mismatches auf die tatsächliche Abweichung zwischen Server und Client zurück (Client-only-Werte, nichtdeterministische Inhalte), statt pauschal alles mit ClientOnly zu umschließen.\u003c\/li\u003e\n  \u003cli\u003eErstellt eine Abdeckung mit Vitest und Vue Test Utils, die auf das tatsächliche Risiko im getesteten Composable, Store oder in der getesteten Komponente zugeschnitten ist.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eSo verwendest du sie\u003c\/h3\u003e\n\u003cp\u003eFüge Zosias SKILL.md in deine Claude-Projektanweisungen (oder in den System-prompt eines beliebigen AI-Systems) ein und beschreibe anschließend dein Problem als Vue.js-\/Nuxt-Frontend-Engineer. Funktioniert mit Claude, ChatGPT und jedem AI-Chat. In weniger als 2 Minuten installiert.\u003c\/p\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58342395838728,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/sw33-zosia-vue-nuxt-frontend-engineer-nf.png?v=1785685145","url":"https:\/\/kissmyskills.com\/de\/products\/zosia-vue-js-nuxt-frontend-engineer-ai-skill","provider":"KissMySkills","version":"1.0","type":"link"}