Ready for Vue 3? Here’s how to ease the transition

Exploring Vue 3’s Composition API: A Practical Approach

Introduction

In the dynamic world of software development, staying ahead is crucial. At Zeitspace, our approach involves anticipating future trends and adopting innovative solutions to streamline transitions. In a recent collaboration with the Kitchener Waterloo Community Foundation (KWCF), we faced the challenge of transitioning from Vue 2 to Vue 3 in a seamless manner. To address this, we leveraged the Vue 2 Composition API plugin, a strategic move that allowed us to embrace Vue 3 features without compromising our existing code base.

Understanding the Composition API

1. Code Organization with Composition API

The Composition API introduces a paradigm shift by emphasizing functional organization over the traditional separation of variables, methods, and computed properties. This approach enhances code clarity and maintainability, making it easier to comprehend and modify.

2. Eliminating ‘this’ Keyword

One notable advantage of the Composition API is the removal of the ‘this’ keyword. This elimination simplifies the use of arrow functions, eliminating concerns about the reference context. This not only enhances code readability but also reduces potential errors.

3. Introducing Composables

The Composition API brings forth composables, a powerful feature facilitating clean and reusable code. Unlike the previous Options API’s mixins, composables avoid issues such as naming conflicts and implicit dependencies. This contributes to a more robust and modular code structure.

Vue 3 Adoption Challenges

4. Library Support for Vue 3

Despite Vue 3’s official launch in September 2020, major libraries have been slow to upgrade for compatibility. For instance, Vuetify 3, a popular Vue component library, was anticipated to launch in May 2022. This delay influenced our decision to opt for the Composition API plugin in our KWCF project, where Vuetify was a crucial component.

5. Using Composition API Plugin

To bridge the gap between Vue 2 and Vue 3, we integrated the Composition API plugin into our project. This plugin enables the utilization of Vue 3’s Composition API within a Vue 2 codebase, providing a practical solution to ease the transition.

Practical Implementation: Todo List Application

6. Setting Up the Todo List Application

To illustrate the use of the Composition API, we created a Todo list application using Node 16, MongoDB, and Vue. The application’s front-end and back-end repositories can be cloned using the following commands:

7. Implementation Steps

7.1. Backend Setup

Ensure MongoDB is running and run the following commands in the ‘vuedo-backend’ directory:

7.2. Frontend Setup

Navigate to the ‘vuedo’ directory in a new terminal instance and install the Vue Composition API plugin and Vuex composition helpers:

8. Converting Components to Composition API

8.1. Refactoring AddTodoModal Component

The Composition API introduces the ‘setup’ function, which serves as the entry point for integrating Composition API features. We moved variables from the ‘data’ section to the ‘setup’ function, utilizing the ‘ref’ function to maintain reactivity.

8.2. Vuex Store Adaptation

We updated how we access the Vuex store by importing vuex composition helpers and creating a namespaced helper for the todos store. The ‘useActions’ hook replaced ‘mapActions’ in the computed section.

8.3. Methods Refactoring

Methods were moved from the ‘methods’ section to the ‘setup’ function, promoting logical grouping based on functionality. Proper definition adjustments were made, and the ‘this’ keyword was replaced with direct references to the state variables.

8.4. Lifecycle Hooks Replacement

Composition API replaces lifecycle methods with hooks. The ‘onMounted’ hook, for example, replaced the traditional ‘mounted’ method, ensuring cleaner and more organized code.

8.5. Computed Values Migration

Computed values now reside within the ‘setup’ function, using the ‘computed’ hook. This approach aligns with the Composition API’s emphasis on functional organization.

Embracing the Power of Composition API

9. Taking Advantage of Composables

After converting the codebase, we can leverage the Composition API’s powerful features, such as composables. Composables enable the creation of shared code logic, enhancing code maintainability and reducing redundancy. As libraries increasingly support Vue 3’s Composition API, now is an opportune time to update codebases and benefit from improved organization and functionality.

Conclusion

In the ever-evolving landscape of software development, adapting to emerging technologies is paramount. The Composition API in Vue 3 offers a forward-looking approach, emphasizing code organization, arrow function simplicity, and the use of composables. Through our practical implementation in the KWCF project, we have demonstrated how the Composition API plugin serves as a valuable bridge for projects transitioning from Vue 2 to Vue 3. As you embark on similar journeys, embracing the Composition API can unlock a new level of code efficiency and maintainability.