[{"data":1,"prerenderedAt":108},["ShallowReactive",2],{"site-info":3,"\u002Fwriting\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components":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":89,"description":90,"extension":15,"externalUrl":91,"featuredImage":92,"meta":93,"navigation":94,"path":95,"platform":96,"publishedAt":97,"readingTime":98,"seo":99,"status":100,"stem":101,"tags":102,"updatedAt":11,"__hash__":107},"writing\u002Fwriting\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components.md","How To Create Reusable Blocks of Code with Vue Single-File Components",{"type":8,"value":59,"toc":87},[60,69,80],[61,62,63,64,68],"p",{},"This ",[65,66,67],"strong",{},"Vue Single-File Components tutorial"," explains how to turn a growing interface into smaller, reusable blocks of code. It starts with the basic structure of an SFC, then shows how Vue components become easier to scale when markup, logic, and styling are grouped into focused units.",[61,70,71,72,75,76,79],{},"The walkthrough covers creating a component, passing data with ",[65,73,74],{},"props",", and using ",[65,77,78],{},"slots"," to build a more flexible card component that can adapt to different layouts. That combination makes the article especially helpful for developers who want to move past monolithic templates and build cleaner component systems.",[61,81,82,83,86],{},"If you are learning ",[65,84,85],{},"Vue component architecture, props, slots, and reusable Single-File Components",", this guide gives a practical introduction to the patterns that matter most.",{"title":11,"searchDepth":12,"depth":12,"links":88},[],"Tutorial","Learn how Vue Single-File Components, props, and slots help you build reusable UI blocks, cleaner component architecture, and more maintainable Vue apps.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components","\u002Fwriting\u002Fvuejs.webp",{},true,"\u002Fwriting\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components","DigitalOcean","2021-04-07",5,{"title":57,"description":90},"published","writing\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components",[103,104,105,106],"JavaScript","Vue","Single-File Components","Component Architecture","g2WMLbnxeScG5CRh9BustD1-Xg46MSSd70Biboc3vUs",1775364557091]