[{"data":1,"prerenderedAt":332},["ShallowReactive",2],{"posts":3},[4,257],{"id":5,"title":6,"author":7,"body":8,"coverImage":242,"date":243,"description":244,"extension":245,"meta":246,"navigation":247,"path":248,"seo":249,"stem":250,"tags":251,"__hash__":256},"blog\u002Fblog\u002Fbuefy-migration.md","Migrating Buefy from Vue 2 to Vue 3","wesdevpro",{"type":9,"value":10,"toc":222},"minimark",[11,15,19,30,35,38,67,70,74,77,85,88,95,98,105,108,115,130,134,162,166,185,189,192,203,207,210,213],[12,13,6],"h1",{"id":14},"migrating-buefy-from-vue-2-to-vue-3",[16,17,18],"p",{},"The transition from Vue2 to Vue3 has been one of the most anticipated upgrades in the Vue ecosystem. For developers relying on Buefy—a lightweight UI component library based on Bulma—this migration posed both exciting opportunities and technical challenges.",[16,20,21,22,29],{},"In this post, I’ll walk you through the key steps, lessons learned, and best practices from migrating Buefy to Vue3, based on my experience as part of the ",[23,24,28],"a",{"href":25,"rel":26},"https:\u002F\u002Fgithub.com\u002Fbuefy\u002Fbuefy-vue3-development-team",[27],"nofollow","buefy-vue3-development-team",".",[31,32,34],"h2",{"id":33},"why-migrate","Why Migrate?",[16,36,37],{},"Vue3 introduced several game-changing features:",[39,40,41,49,55,61],"ul",{},[42,43,44,48],"li",{},[45,46,47],"strong",{},"Composition API"," for better logic reuse",[42,50,51,54],{},[45,52,53],{},"Improved performance"," and smaller bundle sizes",[42,56,57,60],{},[45,58,59],{},"Teleport, Fragments, and Suspense"," for more flexible UI rendering",[42,62,63,66],{},[45,64,65],{},"TypeScript support"," baked into the core",[16,68,69],{},"For Buefy, staying on Vue2 meant falling behind in compatibility and performance. Migration was inevitable to stay relevant and modern.",[31,71,73],{"id":72},"migration-strategy","Migration Strategy",[16,75,76],{},"We approached the migration in phases:",[78,79,81,82],"h3",{"id":80},"_1-audit-existing-components","1. ",[45,83,84],{},"Audit Existing Components",[16,86,87],{},"We started by identifying components that relied heavily on Vue2 options API and deprecated lifecycle hooks.",[78,89,91,92],{"id":90},"_2-refactor-to-composition-api","2. ",[45,93,94],{},"Refactor to Composition API",[16,96,97],{},"Where possible, we rewrote logic using the Composition API. This allowed for cleaner separation of concerns and better scalability.",[78,99,101,102],{"id":100},"_3-update-dependencies","3. ",[45,103,104],{},"Update Dependencies",[16,106,107],{},"Some third-party libraries used by Buefy were not Vue3-compatible. We either upgraded them or replaced them with alternatives.",[78,109,111,112],{"id":110},"_4-testing-qa","4. ",[45,113,114],{},"Testing & QA",[16,116,117,118,123,124,129],{},"We used ",[23,119,122],{"href":120,"rel":121},"https:\u002F\u002Fvitest.dev\u002F",[27],"Vitest"," and ",[23,125,128],{"href":126,"rel":127},"https:\u002F\u002Fplaywright.dev\u002F",[27],"Playwright"," to ensure components behaved consistently across versions.",[31,131,133],{"id":132},"challenges-faced","Challenges Faced",[39,135,136,142,156],{},[42,137,138,141],{},[45,139,140],{},"Bulma’s limitations",": While Bulma is great for styling, it lacks the flexibility of utility-first frameworks like Tailwind. We had to write custom CSS for some Vue3 features.",[42,143,144,147,148,123,152,155],{},[45,145,146],{},"Breaking changes in Vue3",": Some Vue2 patterns simply didn’t translate. For example, ",[149,150,151],"code",{},"$listeners",[149,153,154],{},"$attrs"," behavior changed, requiring rewrites.",[42,157,158,161],{},[45,159,160],{},"Community plugins",": Many plugins built for Vue2 weren’t maintained, forcing us to fork or build our own.",[31,163,165],{"id":164},"key-wins","Key Wins",[39,167,168,173,179],{},[42,169,170,172],{},[45,171,53],{},": Initial load times dropped by ~30%.",[42,174,175,178],{},[45,176,177],{},"Better DX",": Developers now enjoy TypeScript support and cleaner APIs.",[42,180,181,184],{},[45,182,183],{},"Future-proofing",": We’re now aligned with the Vue ecosystem’s direction.",[31,186,188],{"id":187},"whats-next","What’s Next?",[16,190,191],{},"We’re working on:",[39,193,194,197,200],{},[42,195,196],{},"Full documentation for Vue3 components",[42,198,199],{},"Migration guides for users upgrading their apps",[42,201,202],{},"Exploring integration with Oruga UI for extended flexibility",[31,204,206],{"id":205},"final-thoughts","Final Thoughts",[16,208,209],{},"Migrating Buefy to Vue3 wasn’t just a technical upgrade—it was a chance to rethink how we build UI components. The process was challenging but deeply rewarding, and the result is a more modern, performant, and developer-friendly library.",[16,211,212],{},"If you're considering migrating your own Vue2 project, start small, test often, and embrace the new paradigms Vue3 offers.",[16,214,215,216,219,220],{},"Happy coding!",[217,218],"br",{},"\n— ",[45,221,7],{},{"title":223,"searchDepth":224,"depth":224,"links":225},"",2,[226,227,238,239,240,241],{"id":33,"depth":224,"text":34},{"id":72,"depth":224,"text":73,"children":228},[229,232,234,236],{"id":80,"depth":230,"text":231},3,"1. Audit Existing Components",{"id":90,"depth":230,"text":233},"2. Refactor to Composition API",{"id":100,"depth":230,"text":235},"3. Update Dependencies",{"id":110,"depth":230,"text":237},"4. Testing & QA",{"id":132,"depth":224,"text":133},{"id":164,"depth":224,"text":165},{"id":187,"depth":224,"text":188},{"id":205,"depth":224,"text":206},"https:\u002F\u002Fbuefy.org\u002Fstatic\u002Fimg\u002Fbuefy-banner.png","2025-09-07","Lessons learned, migration strategy, and key technical wins from moving Buefy from Vue 2 to Vue 3.","md",{},true,"\u002Fblog\u002Fbuefy-migration",{"title":6,"description":244},"blog\u002Fbuefy-migration",[252,253,254,255],"Buefy","Software Migration","Vue2ToVue3","vue3","kqSsrVfhqIzkzI5JqMeKtCikstxbl_6KJqRc5TcdSDk",{"id":258,"title":259,"author":7,"body":260,"coverImage":317,"date":318,"description":319,"extension":245,"meta":320,"navigation":247,"path":321,"seo":322,"stem":323,"tags":324,"__hash__":331},"blog\u002Fblog\u002Fintroduction-post.md","The Life and Mission of wesdevpro",{"type":9,"value":261,"toc":314},[262,265,268,271,274,277,280,284,287,298,301,311],[12,263,259],{"id":264},"the-life-and-mission-of-wesdevpro",[16,266,267],{},"wesdevpro represents the professional work of Wesley Ford, shaped by curiosity, persistence, and a commitment to building practical software.",[16,269,270],{},"Wesley’s interest in development began in his early teens when he learned C++ from a book gifted by his \"adopted\" grandparents. Early projects, including small games and experimental ideas, sparked a long-term interest in creating tools that solve real problems.",[16,272,273],{},"During the COVID period, Wesley helped create Analyst, a platform designed to support traders through news, AI, and personalized metrics. Although the project did not progress due to funding and academic commitments, it provided valuable experience in product development, collaboration, and technical planning.",[16,275,276],{},"The work behind Analyst introduced Wesley to Buefy, a lightweight Vue.js UI library. After discovering that the project was no longer actively maintained, he connected with contributors including Kikuo and began assisting with the migration to Vue 3. He has continued contributing to Buefy and remains involved in its ongoing development.",[16,278,279],{},"Wesley currently serves as a Software Engineer at SouthState Bank, where he builds and maintains multiple C# applications across Blazor, MVC, backend services, and scheduled jobs. He supports multiple business units across the bank and stays involved in the latest IT initiatives at the bank.",[31,281,283],{"id":282},"what-this-site-is-for","What This Site Is For",[16,285,286],{},"This site serves as a place to:",[39,288,289,292,295],{},[42,290,291],{},"Share practical insights and lessons from ongoing work",[42,293,294],{},"Highlight projects and open-source contributions",[42,296,297],{},"Connect with collaborators, clients, and developers",[16,299,300],{},"For inquiries related to Buefy, new projects, or technical discussions, Wesley welcomes conversation.",[16,302,303,306,307],{},[45,304,305],{},"Contact:"," ",[23,308,310],{"href":309},"mailto:wes@wesdevpro.com","wes@wesdevpro.com",[16,312,313],{},"wesdevpro reflects a professional journey focused on thoughtful engineering, continuous learning, and meaningful contributions to the software community.",{"title":223,"searchDepth":224,"depth":224,"links":315},[316],{"id":282,"depth":224,"text":283},"\u002Fimages\u002Fwesdevpro-banner.jpg","2025-07-29","The story behind wesdevpro, software journey milestones, and the mission for building practical products.",{},"\u002Fblog\u002Fintroduction-post",{"title":259,"description":319},"blog\u002Fintroduction-post",[325,326,327,252,328,329,330],"software development","Nuxt.js","Bulma","origin story","portfolio","business","2fPy5D3AnpK_rOLyjQHPHWRjtQcux7bXs6zBjD-ikh0",1775748225531]