[{"data":1,"prerenderedAt":111},["ShallowReactive",2],{"site-info":3,"\u002Fwriting\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api":55},{"id":4,"title":5,"baseTitle":6,"body":7,"city":14,"description":11,"extension":15,"firstName":16,"lastName":17,"meta":18,"navigation":19,"path":35,"resumeUrl":36,"role":37,"seo":38,"socialLinks":39,"state":52,"stem":53,"__hash__":54},"siteInfo\u002Fsite-information.md","Site Information","| Front-End Software Engineer | Cincinnati, OH",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"Cincinnati","md","Dave","Berning",{},[20,23,26,29,32],{"name":21,"to":22},"About","\u002Fabout",{"name":24,"to":25},"Work","\u002Fwork",{"name":27,"to":28},"Writing","\u002Fwriting",{"name":30,"to":31},"Endorsements","\u002Fendorsements",{"name":33,"to":34},"Contact","\u002Fcontact","\u002Fsite-information","\u002Fresume","Front-End Software Engineer",{"description":11},[40,44,48],{"label":41,"href":42,"icon":43},"LinkedIn","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdavidberning\u002F","simple-icons:linkedin",{"label":45,"href":46,"icon":47},"GitHub","https:\u002F\u002Fgithub.com\u002Fdaveberning","simple-icons:github",{"label":49,"href":50,"icon":51},"Email","mailto:hello@daveberning.io","lucide:mail","OH","site-information","Riwsk3KNMBr9V9OmxgoWlnFymJ_mfMFTDiaiIADNjUo",{"id":56,"title":57,"body":58,"category":93,"description":94,"extension":15,"externalUrl":95,"featuredImage":96,"meta":97,"navigation":98,"path":99,"platform":100,"publishedAt":101,"readingTime":102,"seo":103,"status":104,"stem":105,"tags":106,"updatedAt":11,"__hash__":110},"writing\u002Fwriting\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api.md","How To Make Your Vue.js Application DRY with Slots, Mixins, and Composition API",{"type":8,"value":59,"toc":91},[60,69,84],[61,62,63,64,68],"p",{},"This article is about keeping a ",[65,66,67],"strong",{},"Vue.js application DRY"," by choosing the right reuse strategy for the problem in front of you. Rather than repeating template code or duplicating component logic, it compares several of Vue’s built-in patterns for sharing behavior more intelligently.",[61,70,71,72,75,76,79,80,83],{},"The tutorial looks at ",[65,73,74],{},"slots"," for flexible layouts, ",[65,77,78],{},"mixins"," for shared methods and state, and the ",[65,81,82],{},"Composition API"," for extracting reusable logic into cleaner, more maintainable units. That makes it especially relevant for teams working on larger Vue codebases where repeated code quickly becomes a maintenance burden.",[61,85,86,87,90],{},"If you want a better grasp of ",[65,88,89],{},"Vue code reuse, slots, mixins, Composition API patterns, and scalable component design",", this guide lays out the tradeoffs clearly.",{"title":11,"searchDepth":12,"depth":12,"links":92},[],"Tutorial","Learn how to keep Vue applications DRY with slots, mixins, and the Composition API so you can reuse logic, reduce duplication, and scale cleanly.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api","\u002Fwriting\u002Fvuejs.webp",{},true,"\u002Fwriting\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api","DigitalOcean","2021-12-03",6,{"title":57,"description":94},"published","writing\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api",[107,108,82,109],"JavaScript","Vue","Component Reuse","_FiAoZJi1V7SU61eRx2MMAyP2Q5CeVJvJoRczWUKxrY",1775364556304]