Gradido: Enhancing Web App Performance – Vue 2 to Vue 3 Migration

Gradido, a non-profit organization developing an alternative monetary model, faced the challenge of migrating its complex digital currency platform from Vue 2 to Vue 3. The project aimed to future-proof the platform, improve performance, and align with modern development practices.

The company and product

Gradido is a unique monetary system designed to facilitate a sustainable economy through a self-regulating money supply.

The Gradido digital currency platform leverages an advanced Distributed Ledger Technology (DLT) to provide a secure, decentralized monetary management system. Users can easily manage their digital wallets, track their funds, and conduct transactions. Gradido is committed to social and ecological well-being: the platform rewards users for contributing to the common good through a unique bonus system. Its self-regulating money supply is designed to reduce wealth inequality while ensuring stable cash flow and pricing.

Built on a decentralized framework, the Gradido enables community governance and users’ active participation in shaping the economic system. Decentralization fosters trust among users and enhances the system’s resilience. With an intuitive, user-friendly interface, the application makes it simple to create digital wallets, track financial activity, and engage with the community. Gradido is designed to evolve into a comprehensive currency system promoting global prosperity and peace.

Client’s feedback

Scope and Highlights

Vue 3 migration

Code base and test migration

Unit and End-to-End tests

1k+

rewritten tests to ensure app functioning on the new tech stack

400+

updated code files for Vue 3 compatibility

team members

The Challenge

The main goal was the Vue 3 migration, which involved ensuring front-end and admin app compatibility with modern practices to future-proof the platform and meet evolving community standards.

Migrating the project to Vue 3 posed several key challenges, particularly regarding compatibility with critical components and libraries. Dealing with BootstrapVue was particularly demanding as the current solution was no longer developed and incompatible with Vue 3. The team adopted the alpha release of bootstrap-vue-next to move forward, which carried some risk due to its ongoing development status and involved a complete rewrite. Given its active development and community support, we felt confident in bootstrap-vue-next despite all the odds.

Another major topic was migrating the vee-validate library to version 4.0, which introduced significant changes in how forms and validations are handled, requiring a shift in our approach. Driven by vee-validate 4.0's superior support, we strategically switched from the Options API to the Composition API. This shift aligned with modern Vue 3 practices, simplifying form handling and improving code maintainability.

We undertook extensive codebase cleanup as part of the migration, removing deprecated code, refactoring functions, and streamlining components. We also standardized coding practices, eliminated redundant dependencies, and improved documentation. This effort ensured a smoother migration and enhanced overall code quality and maintainability.

Key challenges

Ensuring code quality and functionality during migration through thorough standardization.

Adapting new dependencies and libraries while maintaining the app's functionality.

Meeting the project timeline was at risk due to transition to Vue 3's Composition API and components refactoring.

Ensuring code quality and functionality during migration through thorough standardization.

Adapting new dependencies and libraries while maintaining the app's functionality.

Meeting the project timeline was at risk due to transition to Vue 3's Composition API and components refactoring.

The Process

The Gradido migration to Vue 3 followed a structured and phased approach to ensure a smooth transition for the admin interface and the application frontend.

The migration process started with setting up dedicated development and testing environments to facilitate a smooth transition. The Monterail team mirrored the client’s repository to ensure alignment across teams. Next, our developers upgraded the tooling, removing the @vue/cli-service dependencies and related plugins. The Webpack module bundler was replaced with Vite, significantly improving the development experience. As a result, the Node.js version was upgraded to ensure both apps ran on the same release.

Incompatible libraries, like BootstrapVue, were either upgraded—such as migrating to bootstrap-vue-next—or replaced as needed. Following the migration guide, Monterail's Vue developers addressed compatibility warnings and breaking changes to secure smooth integration. Finally, comprehensive testing, including manual QA, was performed to confirm the application’s functionality with Vue 3 and its updated dependencies.

The development team focused on updating environments, upgrading tooling, resolving compatibility warnings, and rewriting tests to ensure a seamless transition to Vue 3, ensuring minimal disruption and high standards for the Gradido platform.

This is how we made it happen:

Addressing the incompatibility of BootstrapVue with Vue3 by migrating to bootstrap-vue-next, the Vue 3 version of the library.
Migrating the vee-validate library to version 4.0 (including a switch from the Options API to the Composition API).
Streamlining dependencies and leveraging the latest tools available for Vue3 (vue-timers and vue2-transitions were replaced with corresponding Vue3 libraries).
Focusing on refactoring the codebase. Vue developers standardized async code handling by switching from a mix of async/await and promise-based calls to using only async/await.

Gradido application screenshoots

Team’s voice

The Outcome

The migration of the Gradido platform from Vue 2 to Vue 3 resulted in significant improvements in key areas of performance, maintainability, and access to new features.

Enhanced rendering speed and reduced memory usage have notably boosted the platform's responsiveness, resulting in faster load times and smoother interactions for the admin interface and frontend application. A team of developers has rewritten over 1,000 stack optimization tests and updated over 400 code files to ensure compatibility with the Vue 3 framework.

The migration also streamlined the codebase by unifying async handling and adopting a consistent coding style. It made the code easier to maintain and reduced technical debt, simplifying future feature development and bug fixes. As a result of the migration, Gradido now benefits from modern Vue 3 features such as the Composition API and supports advanced libraries like vee-validate, enabling more sophisticated functionalities. The migration has made the Gradido platform more robust, efficient, and future-ready.

The success of this project hinged on the following factors:

Comprehensive planning, clear scope, and well-structured workflow.
Effective library management and tooling upgrades based on vue developers' in-depth expertise.
Focus on code quality and Vue best practices, enhancing readability and maintainability.