With the imminent release of Vue 3, this is a great time to build an app with the new Vue 3 Composition API. While this change in how you can build components is one of Vue 3’s biggest features, here are some other key benefits of this version:
- Smaller and faster.
- Improved TypeScript support.
- Exposes lower-level APIs.
- Apps will be more maintainable.
Let’s get back to the Composition API by building a simple TODO application. Look at the blocks below for a high-level difference between a component written with the Composition API, and the older Options API. We’ll dive into additional details as we build the application.
Options API with Vue 2
Composition API with Vue 3
Getting Started: Configuring the Development Environment
For this tutorial, we will be using the Eclipse IDE with the CodeMix plugin installed, though the concepts presented can be followed in any IDE:
- Download Eclipse IDE and install CodeMix from the Eclipse marketplace or via Genuitec.com.
- Alternatively, for a standalone installer, use Angular IDE — yes, it has full support for Vue too!
- If the Vue pack isn’t already installed, install it using the CodeMix Extension Browser (Help > CodeMix Extensions).
You may also like:
Build a Secure App With Spring Boot and Vue.js.
If you’re looking for an IDE to take on development with frameworks like Angular, React, and Vue.js, or languages like Python and Rust, CodeMix has you covered. For Vue, install the Vue pack or the famed Vetur extension for Vue support. Codemix is compatible with all Eclipse-based IDEs and tools, such as MyEclipse, Spring Tools Suite, and JBoss Tools.
Creating a Vue Project Using CodeMix
We can now create our application using the CodeMix Project Wizard. To create a new Vue Project, navigate to File > New > Project > CodeMix > Vue Project. Ensure you choose the, “A Vue CLI-built application” option in the wizard before clicking Finish.
The Vue CLI creates a Vue 2 application. By adding the
composition-api module to the project, we can use the Composition API in our Vue 2 application (this will not make it a Vue 3 application). Please run the following command in Terminal:
npm install @vue/composition-api
Then, modify your main.js file as shown below:
It’s a good idea to use Bootstrap to add some styling and icons to our application. For that, we need to add the following lines of code to our main HTML file in the
So, go ahead and open up the
index.html file in the
src folder and update it, as shown below:
Now we’ve come to the main feature — using the composition API to build our application. The key benefit of this API is enhanced maintainability of your code by keeping logical concerns grouped together instead of being split up across component options like data, props, methods, etc.
While the benefits are not immediately apparent in our simple TODO application, imagine a more complex application, where the logic for different capabilities would normally be split across the file —the more your application grows in complexity, the harder it becomes to read and maintain.
As a comparison, we’ve shown how this component would be implemented with both the Options API and the Composition API. Please copy the composition version into the
<script> section of your
The Composition API manages reactivity differently than the Options API. There are two ways to deal with state and reactivity in the new Composition API, Refs and Reactive. With Reactive, we tell Vue about which properties of an object should be watched and therefore rendered when needed. Ref, instead, gives a value property to any object, and whenever we assign a new value to it, Vue will update the template with the new value.
At the crux of the Composition API is the setup function, which is just a function that returns properties and functions to the template. It is important to mention that any data that uses refs or reactive, needs to be returned as objects from the setup function.
We now move on to styling; insert the following CSS into the
<style> section of the Vue file:
Then, add the following code in the template section:
When pressing the green play button located on the top right of our editor, CodeMix automatically launches the server and opens the Live Preview Pane. In it, we can observe our application running without the need of an external browser, as shown on the gif below:
While the Composition API is a much better way of working with components, it is important to note that this API is an alternative to the current Options API and not a replacement. We can still work with components using options, mixins, and scoped slots, as is the norm in Vue 2. The Vue core team has stated that the Options API would still continue to be supported in Vue 3.
You can download the source code for this app from our GitHub repository.