[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-vue-3-composables-wiederverwendbare-logik":3},{"_createdAt":4,"_id":5,"author":6,"body":7,"canonicalUrl":191,"category":192,"coverImage":193,"excerpt":200,"featured":201,"publishedAt":202,"readingTime":203,"relatedPosts":191,"seoDescription":204,"seoTitle":205,"slug":206,"tags":209,"title":215},"2026-04-14T11:16:07Z","epzDXqrM0Ug1OrZfNfKJ6z","Joel Schwegmann",[8,19,28,36,44,53,63,71,79,87,95,103,111,119,127,135,143,151,159,167,175,183],{"_key":9,"_type":10,"children":11,"markDefs":17,"style":18},"d1820420-300","block",[12],{"_key":13,"_type":14,"marks":15,"text":16},"f80f9d07-c17","span",[],"Was sind Composables?",[],"h2",{"_key":20,"_type":10,"children":21,"markDefs":26,"style":27},"df2e460f-79e",[22],{"_key":23,"_type":14,"marks":24,"text":25},"ba0fe748-ae5",[],"Composables sind Funktionen, die Vue 3 Reactivity nutzen, um wiederverwendbare Logik zu kapseln. Sie ersetzen die Mixins und Options-API-Patterns aus Vue 2 und bieten bessere Typsicherheit, klarere Abhängigkeiten und einfacheres Testing.",[],"normal",{"_key":29,"_type":10,"children":30,"markDefs":35,"style":18},"66983595-cf7",[31],{"_key":32,"_type":14,"marks":33,"text":34},"cb3f274a-60f",[],"Anatomie eines guten Composables",[],{"_key":37,"_type":10,"children":38,"markDefs":43,"style":27},"df7049a3-88b",[39],{"_key":40,"_type":14,"marks":41,"text":42},"a1c395ec-7db",[],"Ein gut strukturiertes Composable folgt einem klaren Pattern: Es beginnt mit use, nimmt optionale Parameter entgegen, nutzt reaktive Refs intern und gibt ein Objekt mit reaktiven Werten und Methoden zurück. Lifecycle-Hooks wie onMounted und onUnmounted werden intern verwaltet.",[],{"_key":45,"_type":10,"children":46,"markDefs":51,"style":52},"28307be7-729",[47],{"_key":48,"_type":14,"marks":49,"text":50},"52e2169e-5b3",[],"Grundregeln:",[],"h3",{"_key":54,"_type":10,"children":55,"level":60,"listItem":61,"markDefs":62,"style":27},"672f687c-087",[56],{"_key":57,"_type":14,"marks":58,"text":59},"7b9936b0-93b",[],"Namenskonvention: Immer mit use beginnen (useAuth, useFetch, useCart)",1,"bullet",[],{"_key":64,"_type":10,"children":65,"level":60,"listItem":61,"markDefs":70,"style":27},"4da3822e-d5b",[66],{"_key":67,"_type":14,"marks":68,"text":69},"57623f43-76c",[],"Rückgabe: Immer ein Objekt mit benannten Properties (nicht ein Array)",[],{"_key":72,"_type":10,"children":73,"level":60,"listItem":61,"markDefs":78,"style":27},"9dad0078-5f3",[74],{"_key":75,"_type":14,"marks":76,"text":77},"b3a39d22-a79",[],"Cleanup: Immer in onUnmounted aufräumen (Event-Listener, Timer, Subscriptions)",[],{"_key":80,"_type":10,"children":81,"level":60,"listItem":61,"markDefs":86,"style":27},"590653f2-2a8",[82],{"_key":83,"_type":14,"marks":84,"text":85},"d4c0763c-21b",[],"TypeScript: Rückgabetyp explizit definieren",[],{"_key":88,"_type":10,"children":89,"markDefs":94,"style":18},"f3352b78-0a4",[90],{"_key":91,"_type":14,"marks":92,"text":93},"160e626a-40e",[],"Pattern 1: Data Fetching",[],{"_key":96,"_type":10,"children":97,"markDefs":102,"style":27},"645af82d-2a2",[98],{"_key":99,"_type":14,"marks":100,"text":101},"d3c712f8-103",[],"Das häufigste Pattern: Ein Composable, das Daten von einer API lädt. Es verwaltet Loading-State, Error-Handling und die Daten selbst. Mit generischen TypeScript-Typen wird es für jeden Endpoint wiederverwendbar.",[],{"_key":104,"_type":10,"children":105,"markDefs":110,"style":18},"0776ae9d-366",[106],{"_key":107,"_type":14,"marks":108,"text":109},"68334bf9-9e8",[],"Pattern 2: UI-State",[],{"_key":112,"_type":10,"children":113,"markDefs":118,"style":27},"096fe425-cd0",[114],{"_key":115,"_type":14,"marks":116,"text":117},"2e21c84c-42a",[],"Modale Dialoge, Toasts, Sidebar-State – UI-Logik, die in vielen Komponenten gebraucht wird, gehört in Composables. Nutze provide\u002Finject für App-weiten State oder einfache Refs für komponentenübergreifenden State.",[],{"_key":120,"_type":10,"children":121,"markDefs":126,"style":18},"3845ea95-90c",[122],{"_key":123,"_type":14,"marks":124,"text":125},"55088333-188",[],"Pattern 3: Browser APIs",[],{"_key":128,"_type":10,"children":129,"markDefs":134,"style":27},"35e00cf8-9f0",[130],{"_key":131,"_type":14,"marks":132,"text":133},"460c5a10-fc3",[],"localStorage, IntersectionObserver, ResizeObserver, Geolocation – Browser APIs in Composables zu wrappen macht sie reaktiv und SSR-sicher. Prüfe immer import.meta.client (oder process.client in Nuxt), bevor du auf Browser APIs zugreifst.",[],{"_key":136,"_type":10,"children":137,"markDefs":142,"style":18},"d669106b-3f5",[138],{"_key":139,"_type":14,"marks":140,"text":141},"7716b3d6-667",[],"Testing",[],{"_key":144,"_type":10,"children":145,"markDefs":150,"style":27},"7f1c3f2c-858",[146],{"_key":147,"_type":14,"marks":148,"text":149},"ecfff323-75e",[],"Composables lassen sich hervorragend isoliert testen. Nutze Vitest mit der Vue Test Utils mountSuspended-Funktion. Da Composables reine Funktionen sind, brauchst du kein DOM-Setup – du rufst die Funktion auf und prüfst die reaktiven Rückgabewerte.",[],{"_key":152,"_type":10,"children":153,"markDefs":158,"style":18},"172e177e-457",[154],{"_key":155,"_type":14,"marks":156,"text":157},"e5af7fbb-153",[],"Anti-Patterns vermeiden",[],{"_key":160,"_type":10,"children":161,"level":60,"listItem":61,"markDefs":166,"style":27},"9b0351f5-022",[162],{"_key":163,"_type":14,"marks":164,"text":165},"85721a94-b9c",[],"Nicht zu viel in ein Composable packen – Single Responsibility Principle beachten",[],{"_key":168,"_type":10,"children":169,"level":60,"listItem":61,"markDefs":174,"style":27},"315ad796-2cd",[170],{"_key":171,"_type":14,"marks":172,"text":173},"f2a82b3b-895",[],"Keine Side Effects im Top-Level – nutze onMounted",[],{"_key":176,"_type":10,"children":177,"level":60,"listItem":61,"markDefs":182,"style":27},"0152f8b9-e53",[178],{"_key":179,"_type":14,"marks":180,"text":181},"72b1980e-e07",[],"Kein globaler State ohne Absicht – Composables erstellen bei jedem Aufruf neue Instanzen",[],{"_key":184,"_type":10,"children":185,"level":60,"listItem":61,"markDefs":190,"style":27},"b12f5f68-d49",[186],{"_key":187,"_type":14,"marks":188,"text":189},"cbd8e3a2-c7b",[],"Nicht Options API und Composition API mischen",[],null,"tutorial",{"alt":194,"asset":195,"credit":198,"creditUrl":199},"Laptop mit Code-Editor – Frontend-Entwicklung",{"_id":196,"url":197},"image-593c3544d1704930af273aeb83476cbb96b95dd1-1200x675-jpg","https:\u002F\u002Fcdn.sanity.io\u002Fimages\u002Ff1irfjak\u002Fproduction\u002F593c3544d1704930af273aeb83476cbb96b95dd1-1200x675.jpg","Foto von James Harrison auf Unsplash","https:\u002F\u002Funsplash.com\u002F@jstrippa","Composables sind das Herzstück der Vue 3 Composition API. Lerne, wie du sie richtig strukturierst, testest und in Projekten skalierbar einsetzt.",false,"2026-04-02T09:00:00Z",7,"Vue 3 Composables richtig einsetzen: Strukturierung, Testing und Best Practices für die Composition API.","Vue 3 Composables Guide: Wiederverwendbare Logik strukturieren",{"_type":207,"current":208},"slug","vue-3-composables-wiederverwendbare-logik",[210,211,212,213,214],"Vue.js","Vue 3","Composables","Composition API","TypeScript","Vue 3 Composables: Wiederverwendbare Logik richtig strukturieren"]