[{"data":1,"prerenderedAt":229},["ShallowReactive",2],{"blog-post:\u002Fblog\u002Fbuefy-migration":3,"blog-author:\u002Fblog\u002Fbuefy-migration":108,"all-blog-posts":117},{"id":4,"title":5,"author":6,"body":7,"coverImage":93,"date":94,"description":95,"extension":96,"meta":97,"navigation":98,"path":99,"seo":100,"stem":101,"tags":102,"__hash__":107},"blog\u002Fblog\u002Fbuefy-migration.md","Migrating Buefy from Vue 2 to Vue 3","wesdevpro",{"type":8,"value":9,"toc":84},"minimark",[10,14,25,30,33,37,52,56,67,71,74,78,81],[11,12,13],"p",{},"The transition from Vue 2 to Vue 3 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 meant real technical work, not just a version bump.",[11,15,16,17,24],{},"In this post, I'll walk through the key steps, lessons, and practices from migrating Buefy to Vue 3, based on my work as part of the ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fgithub.com\u002Fbuefy\u002Fbuefy-vue3-development-team",[22],"nofollow","buefy-vue3-development-team",".",[26,27,29],"h2",{"id":28},"why-the-migration-mattered","Why the Migration Mattered",[11,31,32],{},"Vue 3 brought the Composition API for better logic reuse, smaller bundle sizes and improved performance, Teleport, Fragments, and Suspense for more flexible rendering, and TypeScript support built into the core. Staying on Vue 2 meant Buefy would keep falling behind on compatibility and performance, so the migration wasn't optional.",[26,34,36],{"id":35},"migration-strategy","Migration Strategy",[11,38,39,40,45,46,51],{},"I approached the migration in phases. First, I audited the existing components, identifying the ones that relied heavily on the Options API and deprecated lifecycle hooks. Next, I refactored what I could to the Composition API, which cleaned up the separation of concerns and made the codebase easier to extend. Some third-party libraries Buefy depended on weren't Vue 3-compatible, so I either upgraded them or replaced them. Throughout, I used ",[18,41,44],{"href":42,"rel":43},"https:\u002F\u002Fvitest.dev\u002F",[22],"Vitest"," and ",[18,47,50],{"href":48,"rel":49},"https:\u002F\u002Fplaywright.dev\u002F",[22],"Playwright"," to keep components behaving consistently across versions.",[26,53,55],{"id":54},"challenges","Challenges",[11,57,58,59,45,63,66],{},"Bulma is good for styling, but it doesn't have the flexibility of a utility-first framework like Tailwind, so some Vue 3 features needed custom CSS. Vue 3 also changed how ",[60,61,62],"code",{},"$listeners",[60,64,65],{},"$attrs"," behave, which meant rewriting patterns that simply didn't translate from Vue 2. A lot of the community plugins built for Vue 2 weren't maintained anymore, so I had to fork some and build replacements for others.",[26,68,70],{"id":69},"what-improved","What Improved",[11,72,73],{},"Initial load times dropped by about 30%. TypeScript support and cleaner APIs made the codebase easier to work in. And the library is now aligned with where the Vue ecosystem is heading, instead of trailing behind it.",[26,75,77],{"id":76},"whats-next","What's Next",[11,79,80],{},"I'm still working on full documentation for the Vue 3 components and migration guides for people upgrading their own apps. I'm also looking at whether integrating with Oruga UI makes sense for more flexibility down the line.",[11,82,83],{},"Migrating Buefy to Vue 3 wasn't just a technical upgrade — it was a chance to rethink how the components are built. The process took longer than expected, but the result is a more modern, better-performing library. If you're migrating your own Vue 2 project, my advice is the same as anyone's: start small, test constantly, and don't fight the new patterns.",{"title":85,"searchDepth":86,"depth":86,"links":87},"",2,[88,89,90,91,92],{"id":28,"depth":86,"text":29},{"id":35,"depth":86,"text":36},{"id":54,"depth":86,"text":55},{"id":69,"depth":86,"text":70},{"id":76,"depth":86,"text":77},"\u002Fimages\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":5,"description":95},"blog\u002Fbuefy-migration",[103,104,105,106],"Buefy","Software Migration","Vue2ToVue3","vue3","s89Ff0BhlK-5cJX3gwOhXC_iqr6lBpXnj2AbzUecsKk",{"id":109,"avatar":110,"extension":111,"github":6,"meta":112,"name":113,"stem":114,"url":115,"__hash__":116},"authors\u002Fauthors\u002Fwesdevpro.json","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F11604664","json",{},"Wesley Ford","authors\u002Fwesdevpro","https:\u002F\u002Fwesdevpro.com","zp-C6-TKfrVWpk6qKDSsHhcioM2F8SrJnvqQWQutFvI",[118,170],{"id":4,"title":5,"author":6,"body":119,"coverImage":93,"date":94,"description":95,"extension":96,"meta":167,"navigation":98,"path":99,"seo":168,"stem":101,"tags":169,"__hash__":107},{"type":8,"value":120,"toc":160},[121,123,128,130,132,134,142,144,150,152,154,156,158],[11,122,13],{},[11,124,16,125,24],{},[18,126,23],{"href":20,"rel":127},[22],[26,129,29],{"id":28},[11,131,32],{},[26,133,36],{"id":35},[11,135,39,136,45,139,51],{},[18,137,44],{"href":42,"rel":138},[22],[18,140,50],{"href":48,"rel":141},[22],[26,143,55],{"id":54},[11,145,58,146,45,148,66],{},[60,147,62],{},[60,149,65],{},[26,151,70],{"id":69},[11,153,73],{},[26,155,77],{"id":76},[11,157,80],{},[11,159,83],{},{"title":85,"searchDepth":86,"depth":86,"links":161},[162,163,164,165,166],{"id":28,"depth":86,"text":29},{"id":35,"depth":86,"text":36},{"id":54,"depth":86,"text":55},{"id":69,"depth":86,"text":70},{"id":76,"depth":86,"text":77},{},{"title":5,"description":95},[103,104,105,106],{"id":171,"title":172,"author":6,"body":173,"coverImage":214,"date":215,"description":216,"extension":96,"meta":217,"navigation":98,"path":218,"seo":219,"stem":220,"tags":221,"__hash__":228},"blog\u002Fblog\u002Fintroduction-post.md","The Life and Mission of wesdevpro",{"type":8,"value":174,"toc":211},[175,178,181,184,187,190,194,197,200],[11,176,177],{},"I'm Wesley Ford. wesdevpro is the name I build under, and this is a bit about how I got here.",[11,179,180],{},"I got into development in my early teens, when I learned C++ from a book my \"adopted\" grandparents gave me. Small games and experimental projects followed, and that turned into a longer-term interest in building tools that solve real problems.",[11,182,183],{},"During COVID, I helped build Analyst, a platform meant to support traders through news, AI, and personalized metrics. It didn't get past funding and academic commitments, but it taught me a lot about product development, collaboration, and technical planning.",[11,185,186],{},"Analyst is also how I found Buefy, a lightweight Vue.js UI library. I noticed the project had gone unmaintained, reached out to contributors including Kikuo, and started helping with the migration to Vue 3. I've stayed involved since.",[11,188,189],{},"I currently work as a software engineer in fintech, where I build and maintain C# applications across Blazor, MVC, backend services, and scheduled jobs, and support several business units.",[26,191,193],{"id":192},"what-this-site-is-for","What This Site Is For",[11,195,196],{},"This site is where I write about the work: lessons from projects I'm building, the open-source work I do on Buefy, and a way for collaborators, clients, and other developers to reach me.",[11,198,199],{},"If you want to talk about Buefy, a new project, or anything technical, I'm glad to hear from you.",[11,201,202,206,207],{},[203,204,205],"strong",{},"Contact:"," ",[18,208,210],{"href":209},"mailto:wes@wesdevpro.com","wes@wesdevpro.com",{"title":85,"searchDepth":86,"depth":86,"links":212},[213],{"id":192,"depth":86,"text":193},"\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":172,"description":216},"blog\u002Fintroduction-post",[222,223,224,103,225,226,227],"software development","Nuxt.js","Bulma","origin story","portfolio","business","1WQlQ_bCr9AmMuvMdLDZO8AoPw_-iHymIezillRqA4s",1791478860977]