let app = new Vue({
data:{ /* Application data */ },
computed:{ /* computed properties */ },
methods:{ /* functions and methods */ },
})let app = new Vue({
beforeCreate(){},
setup(){},
created(){}
})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.
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.
npm install @vue/composition-apiimport Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')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 <head> section:
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
So go ahead and open up the index.html file in the src folder and update it as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Composition-Todo</title>
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but Composition-Todo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<script> section of your app.vue file. <script>
export default {
data(){
return {
todo: "",
todos: []
};
},
methods:{
addTodo(){
if (this.todo!='') {
this.todos.push(this.todo);
this.todo ='';
}
},
removeTodo(i){
this.todos.splice(i,1)
},
}
}
</script>import { reactive } from "@vue/composition-api";
export default {
setup(){
const {state, addNewTodo, removeTodo} = useTodo();
return {
state,
addNewTodo,
removeTodo
};
}
}
function useTodo(){
let state = reactive({
todo: "",
todos: []
});
function addNewTodo(){
state.todos.push(state.todo);
state.todo = '';
}
function removeTodo(i){
if (state.todo!='') {
state.todos.push(state.todo);
state.todo ='';
}
}
return{
state,
addNewTodo,
removeTodo
};
}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 an object which properties 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:
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.fa {
color:red;
margin-left: 20px;
/* height: 40px; */
}
.fa:hover{
color: black;
/* height: 50px; */
}Then, add the following code in the template section:
<template>
<div id="app">
<section class = "container">
<div class="card">
<div class="card-header"> <h3> Add New Todo</h3></div>
<div class="card-body">
<input type="text" class = "form-control" v-model ="state.todo"/>
<button class="btn btn-primary my-2" @click="addNewTodo"> Add Todo</button>
</div>
</div>
<div class="container my-5">
<div class="card">
<div class="card-header"> <h3> MyTodos</h3></div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item" v-for="(todo, i) in state.todos" :key="i">
{{todo}} <i class="fa fa-trash" aria-hidden="true" @click="removeTodo(i)"></i>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</template>
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. To learn more about the Composition API, we recommend this course at Vue Mastery.
You can download the source code for this app from our GitHub repository.
If you’re not already on the latest CodeMix, download it now to take advantage of all it has to offer! Have any questions or suggestions about this article or any of our products? Let us know your thoughts via Twitter or through the CodeMix forums. Happy Coding!