[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"post":3},{"id":4,"title":5,"author":6,"body":7,"coverImage":241,"date":242,"description":243,"extension":244,"meta":245,"navigation":246,"path":247,"seo":248,"stem":249,"tags":250,"__hash__":255},"blog\u002Fblog\u002Fbuefy-migration.md","Migrating Buefy from Vue 2 to Vue 3","wesdevpro",{"type":8,"value":9,"toc":221},"minimark",[10,14,18,29,34,37,66,69,73,76,84,87,94,97,104,107,114,129,133,161,165,184,188,191,202,206,209,212],[11,12,5],"h1",{"id":13},"migrating-buefy-from-vue-2-to-vue-3",[15,16,17],"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.",[15,19,20,21,28],{},"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 ",[22,23,27],"a",{"href":24,"rel":25},"https:\u002F\u002Fgithub.com\u002Fbuefy\u002Fbuefy-vue3-development-team",[26],"nofollow","buefy-vue3-development-team",".",[30,31,33],"h2",{"id":32},"why-migrate","Why Migrate?",[15,35,36],{},"Vue3 introduced several game-changing features:",[38,39,40,48,54,60],"ul",{},[41,42,43,47],"li",{},[44,45,46],"strong",{},"Composition API"," for better logic reuse",[41,49,50,53],{},[44,51,52],{},"Improved performance"," and smaller bundle sizes",[41,55,56,59],{},[44,57,58],{},"Teleport, Fragments, and Suspense"," for more flexible UI rendering",[41,61,62,65],{},[44,63,64],{},"TypeScript support"," baked into the core",[15,67,68],{},"For Buefy, staying on Vue2 meant falling behind in compatibility and performance. Migration was inevitable to stay relevant and modern.",[30,70,72],{"id":71},"migration-strategy","Migration Strategy",[15,74,75],{},"We approached the migration in phases:",[77,78,80,81],"h3",{"id":79},"_1-audit-existing-components","1. ",[44,82,83],{},"Audit Existing Components",[15,85,86],{},"We started by identifying components that relied heavily on Vue2 options API and deprecated lifecycle hooks.",[77,88,90,91],{"id":89},"_2-refactor-to-composition-api","2. ",[44,92,93],{},"Refactor to Composition API",[15,95,96],{},"Where possible, we rewrote logic using the Composition API. This allowed for cleaner separation of concerns and better scalability.",[77,98,100,101],{"id":99},"_3-update-dependencies","3. ",[44,102,103],{},"Update Dependencies",[15,105,106],{},"Some third-party libraries used by Buefy were not Vue3-compatible. We either upgraded them or replaced them with alternatives.",[77,108,110,111],{"id":109},"_4-testing-qa","4. ",[44,112,113],{},"Testing & QA",[15,115,116,117,122,123,128],{},"We used ",[22,118,121],{"href":119,"rel":120},"https:\u002F\u002Fvitest.dev\u002F",[26],"Vitest"," and ",[22,124,127],{"href":125,"rel":126},"https:\u002F\u002Fplaywright.dev\u002F",[26],"Playwright"," to ensure components behaved consistently across versions.",[30,130,132],{"id":131},"challenges-faced","Challenges Faced",[38,134,135,141,155],{},[41,136,137,140],{},[44,138,139],{},"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.",[41,142,143,146,147,122,151,154],{},[44,144,145],{},"Breaking changes in Vue3",": Some Vue2 patterns simply didn’t translate. For example, ",[148,149,150],"code",{},"$listeners",[148,152,153],{},"$attrs"," behavior changed, requiring rewrites.",[41,156,157,160],{},[44,158,159],{},"Community plugins",": Many plugins built for Vue2 weren’t maintained, forcing us to fork or build our own.",[30,162,164],{"id":163},"key-wins","Key Wins",[38,166,167,172,178],{},[41,168,169,171],{},[44,170,52],{},": Initial load times dropped by ~30%.",[41,173,174,177],{},[44,175,176],{},"Better DX",": Developers now enjoy TypeScript support and cleaner APIs.",[41,179,180,183],{},[44,181,182],{},"Future-proofing",": We’re now aligned with the Vue ecosystem’s direction.",[30,185,187],{"id":186},"whats-next","What’s Next?",[15,189,190],{},"We’re working on:",[38,192,193,196,199],{},[41,194,195],{},"Full documentation for Vue3 components",[41,197,198],{},"Migration guides for users upgrading their apps",[41,200,201],{},"Exploring integration with Oruga UI for extended flexibility",[30,203,205],{"id":204},"final-thoughts","Final Thoughts",[15,207,208],{},"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.",[15,210,211],{},"If you're considering migrating your own Vue2 project, start small, test often, and embrace the new paradigms Vue3 offers.",[15,213,214,215,218,219],{},"Happy coding!",[216,217],"br",{},"\n— ",[44,220,6],{},{"title":222,"searchDepth":223,"depth":223,"links":224},"",2,[225,226,237,238,239,240],{"id":32,"depth":223,"text":33},{"id":71,"depth":223,"text":72,"children":227},[228,231,233,235],{"id":79,"depth":229,"text":230},3,"1. Audit Existing Components",{"id":89,"depth":229,"text":232},"2. Refactor to Composition API",{"id":99,"depth":229,"text":234},"3. Update Dependencies",{"id":109,"depth":229,"text":236},"4. Testing & QA",{"id":131,"depth":223,"text":132},{"id":163,"depth":223,"text":164},{"id":186,"depth":223,"text":187},{"id":204,"depth":223,"text":205},"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":5,"description":243},"blog\u002Fbuefy-migration",[251,252,253,254],"Buefy","Software Migration","Vue2ToVue3","vue3","kqSsrVfhqIzkzI5JqMeKtCikstxbl_6KJqRc5TcdSDk",1775748225627]