Migrating to Vue 2.7

Hello! In this article, I would like to share my experience of updating a project written in Vue 2.6. In addition to updating vue itself and components, I will show with examples how I managed to update other project dependencies and adapt them to work with composition APIamong them: Vuex, BootstrapVue, AgGrid And VueForm Generator.

History of Composition API in Vue

React

Oddly enough, we owe this innovation to React, or rather the concept of react-hooks introduced in 2018.

vue creator Evan Yu on react hooks

vue creator Evan Yu on react hooks

I have never touched React, just read its documentation briefly, so I can not speak objectively about this library feature, however, almost all React developers claim that hooks make it possible to greatly simplify development and create reusable code; Moreover, functional components using hooks are already the standard for React development.

Vue 3

With the release of vue 3rd version, a new approach to creating components became available to developers, similar to the functional components of react – composition API: method setup and <script setup> for use in single-file components.

Comparing the composition API with the options API, the following are usually listed as its advantages:

  • simplicity and conciseness

  • the ability to create reusable pieces of logic (instead of mixins)

  • improved TypeScrit support

  • bOGreater performance (according to the creators)

It is also worth considering critical assessments of this approach:

Sources

In general, it can be seen that all the shortcomings or concerns about using the composition API rest on the experience and knowledge of the developer: the composition API provides much more tools for working with reactivity, which naturally requires some effort to understand and be careful, especially if the developer is used to options or class API.

Vue 2.7

In July 2022, vue 2.7 was released, which added the composition API out of the box (previously this required the library @vue/composition-api), and added the ability to use

A special nice bonus was the ability to use the library VueUsewith the help of which, for example, it was possible to replace the store for the window size and the mixin for tracking changes in its size, with just one function useWindowSize.

You can read a little more about the migration process itself in this article.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *