.png){kind=logo}
We recently upgraded from Vue 2 to Vue 3 across Lawline’s website frontend to stay current with modern frameworks, improve performance, and future-proof our platform. This update allows us to build and release features faster, fix bugs more efficiently, and deliver a smoother, more responsive experience for users. While the transition involved deep technical work—including reworking how we manage Firebase references—the end result is a stronger, more scalable foundation for everything we’re building next. Let's take a deeper dive into these changes!
Why We Upgraded
As we work to keep our tech stack slim and stay up to date with important security updates and new features, the time finally came to upgrade from Vue 2, which was officially deprecated as of December 24, 2023. Beyond the deprecation itself, there were several compelling reasons to make the move:
- Ease of future changes: Many modern libraries and tools are designed exclusively for Vue 3, making it increasingly difficult to integrate new features and updates while stuck on Vue 2.
- Performance Improvements: Vue 3 introduces a faster and more efficient rendering engine, which translates to better performance for large-scale applications.
- Tree-Shaking and Smaller Bundle Sizes: Vue 3 is built with tree-shaking capabilities, ensuring only the necessary code is included in the final bundle, leading to smaller and faster applications.
These improvements not only benefit our development team but also directly impact our users, enabling us to deliver new features more efficiently and ensuring a smoother, faster experience across the Lawline website.
Our Migration Path
In short, we installed the official Vue 3 migration build. This allowed us to bump up to Vue 3 with partial backwards compatibility to make breaking changes more manageable to split up and work through. From there, we split each individual Vue app to work through separately, fixing all the breaking changes, then followed the warnings raised in the console for Vue 2 compatibility features to shut off and fix. By the end, we could simply remove the compat build and end up fully on Vue 3.
This structured approach helped us reduce risk and maintain platform stability for our users during the migration process, keeping everything running smoothly while we worked behind the scenes.
Vuex and Firebase
One of the most confusing issues we encountered during the migration involved how Vuex interacted with Firebase database references. Specifically, Vuex’s state was holding direct references to Firebase DB refs. While this worked in Vue 2, Vue 3’s reactivity system seemed to corrupt those references if saved to state.
The problem manifested as cryptic errors whenever writing to the database. The only reference we could find online was for a still unresolved issue.
After trying all the band-aid approaches suggested, and much trial and error, we found that for our app, the issue would be introduced if a database reference was saved to Vuex state—only subsequent writes would fail. So, ultimately, the fix was simple: move all the database references to their own module and import them from Vuex modules when necessary. This way, Vue’s reactivity never touches it, and the references never get corrupted.
Here’s an example of how we implemented this:
In our Vuex modules, we imported the references as needed without directly modifying them:
Moving Forward
With our project fully migrated to Vue 3, we’re now equipped to take full advantage of its modern features and enhancements. The migration has made our application more maintainable, scalable, and future-proof. It's also given us a better understanding of Vue’s inner workings.
For users, this means a more responsive, stable, and modern Lawline experience—and it opens the door for faster feature development in the future. With Vue 3, we’re no longer held back by outdated tooling. We can build, test, and release enhancements more quickly while improving site performance and reliability.
As part of our ongoing effort to modernize and simplify our tech stack, we’re also planning to:
-
Deprecate Angular Apps in Favor of Vue: Some areas of the site are still powered by Angular 1. We're hoping to finally eliminate this dependency as we revamp our dashboard.
-
Transition from Elasticsearch to Algolia: Some feeds are still powered by Elasticsearch. We plan to move these to Algolia to eliminate the dependency and enhance performance.
Further Your Legal Education With Lawline Courses
Interested in learning more strategies and tips for becoming a better lawyer? Lawline offers a wide assortment of informative continuing education courses that allow you to develop your expertise and take charge of your professional growth. Check out our programs covering more than 60 practice areas and sign up for a free trial today.
Not ready for a subscription? Try Lawline for free today and see how easy it is to earn CLE credits with our user-friendly platform.
Stay up to date! Receive updates on new content, promotions, and more:
