Realise intuitive and scalable web applications with the new Vue 3.

Every advantae has its disadvantage.

A key feature of Vue is that the templating, logic and possibly the styling of a page or component can all take place in one file. This makes it nice and clear and so you don't have to keep searching for the corresponding files. For a small to medium-sized application, this is handy and works nicely, yet my experience is that with larger projects built with Vue, this advantage can also turn somewhat into a disadvantage.

When an application is being (further) developed and therefore becomes larger in size, it is understandable that by adding more data, (lifecycle) methods, (computed) properties and (child) components, it is easier to lose track with several developers. In Vue, you can use mixins to distribute logic more easily to different components and thus take the sting out of complexity to some extent and work DRY. Yet using mixins within Vue also has its drawbacks.

Composition API

One of the biggest new key features of Vue 3.0 is the integration of the composition API. This feature is now fully included in Vue and thus available by default. The main benefit of the composition API is that the code can be set up more generically, making it easier to distribute to different components. Whereas previously it was customary to place logic and data at component level, in Vue 3 using composition API, the logic and data are separated from components and defined more globally. To clarify, below is an example where the distribution of facets is shown on the left using the Options API and the distribution of facets on the right using the composition API.

What does this mean for the customer?

As can be seen, the example on the right is a lot more structured. This provides more overview and clarity, which is essential for the creature called developer. But this development can also have positive outcomes for the client.

By providing more handles for order, the final product has more structure. This keeps the application more orderly, maintainable and reliable.

What else does Vue 3 have in store?

In addition to the composition API, Vue 3 offers a range of new features and capabilities, some examples include:

• Teleport (The ability to easily insert a component into another component in certain places based on a condition or event, think of a modal where the content can be variable).

• Suspense (This allows you to show a fallback component until the other component is fully loaded, e.g. showing a load icon).

• Multiple root elements - (Being able to place multiple root elements within a component, this keeps the HTML even more uncluttered as you have to nest less).

• Multiple v-models - (This allows linking multiple values of a child component at component level (two-way binding)).

• Better Reactivity - (Briefly speaking, reactivity is a concept where at place 1 data is modified and at place 2 a new representation of this data is shown, the method that takes care of this has been revised in Vue 3 making this magic even more magical).

The future.

My initial findings after playing with Vue 3 and the composition API are very positive. I think that with the arrival of version 3, vue in general has made a good step, establishing itself as an even more mature Javascript framework. In recent years, you see an increasing shift taking place in web development, with the share that javascript plays in this becoming larger and larger, both front- and backend. Think of a (headless) CMS controlled with a RESTful API, where the front-end is fully equipped with a Javascript framework. In my opinion, Vue is one of the "best to use" frameworks when it comes to front-end design. We are happy to help your organization in defining the technical architecture of IT and web projects with the techniques to be used.