Vue Native is a framework to build cross platform native mobile apps using JavaScript. This tutorial goes through the basics of the Vue Native and you will create a small ToDo application with it.
Purpose and learning process
In this exercise you will learn how to use Vue Native to build mobile app. You will modify React version of Todo – ToDo application with Vue Native.
- using and rendering build-in components
- creating and rendering an own components
- understand state and props
- event handling
- passing data between components
- calling functions between components
- styles
Install node
You will need to install NodeJS before you can create React Native projects. You can find Node here: https://nodejs.org/en/download/.
INSTALL VUE NATIVE CLI
Install Vue Native CLI globally with the following command. It allows you to setup a fresh Vue Native app with either Expo or React Native CLI.
npm install -g vue-native-cli
Install Expo CLI
This exercise will use Expo to create Vue Native application. You will need to install Expo CLI command line utility. You can follow these instructions Expo Getting Started or commands below.
npm install -g expo-cli
Create a new project
Create a new Vue Native project called “VueToDo”
vue-native init VueToDo
Run project
To get started go to your project folder and start development server.
cd VueToDo
npm start
Now your development server should be running and ready. You can launch Android Emulator and run your app in there or launch Expo app in your device and scan QR code to open app.

Add Banner Component to App
Create a Banner component Banner.vue, which will be used at the top of the ToDo app.
<template>
<view class="container">
<text class="banner">ToDo example with Vue Native</text>
</view>
</template>
<style>
.container {
background-color: #5f9ea0;
justify-content: center;
margin-bottom: 20;
}
.banner {
color: white;
text-align: center;
padding-top: 20;
padding-bottom: 20;
}
</style>
Add created Banner component to your App. Component need to be declared inside components
, so it can be used inside template
. Modify styles to set Banner at the top of the page.
<template>
<view class="container">
<Banner />
</view>
</template>
<script>
import Banner from './Banner'
export default {
name: 'App',
components: {
Banner
}
}
</script>
<style>
.container {
flex: 1;
padding-top:25px;
margin: 5;
}
.banner {
background-color: #5f9ea0;
justify-content: center;
margin-bottom: 20;
}
</style>
Now a Banner component should be visible at the top of the application.

Add a new ToDo to the List
A new todo will be asked with a build-in text-input
component. Todo item will be added to todos array, when a button
is pressed. Create a new ToDoList.vue file with a below code.
This component will hold data for the text, what user is typed for todo, unique id and todos array. Some basic styles is defined for the component.
<template>
<view>
<view class="addToDo">
<text-input
v-model="text"
class="textInput"
/>
<button
title="ADD"
color="#1ab2ff"
accessibility-label="Add a new todo"
/>
</view>
</view>
</template>
<script>
export default {
data: function() {
return {
text:'',
todos:[],
id: 0
};
},
};
</script>
<style>
.addToDo {
flex-direction: row;
margin-bottom: 20
}
.textInput {
border-width: 1;
border-style: solid;
border-color: #ccc;
padding: 5;
margin: 2;
flex: 1;
}
</style>
Import your TodoList to App.
import ToDoList from './ToDoList'
Define it inside components
and use it inside rendering.
export default {
name: 'App',
components: {
Banner,
ToDoList
}
}
<template>
<view class="container">
<Banner />
<ToDoList />
</view>
</template>
Now a Banner and ToDoList components should be visible at the top of the application.

Handle button press event
Add on-press
event handling to button component.
<button
:on-press="onAddTodo"
title="ADD"
color="#1ab2ff"
accessibility-label="Add a new todo"
/>
Add a new onAddTodo
in App’s methods.
<script>
export default {
data: function() {
return {
text:'',
id: 0,
todos: []
};
},
methods: {
onAddTodo: function() {
alert("testing")
}
}
};
</script>
Test and you should see an Alert with “testing” text.

Modify your onAddTodo
method to add a new todo to todos
array. Array will contain object with text and id.
onAddTodo: function() {
this.todos.push({text:this.text, id:this.id})
this.id++
this.text = ''
}
Render todo items
Create a new file called TodoItem.vue. This component will show a todo item text and letter X
, which will be used later to delete todo item. props
will be used to pass data inside this component from the parent.
<template>
<view class="row">
<text>* {{item.text}}</text>
<text class="listItemDelete"> X </text>
</view>
</template>
<script>
export default {
props: {
item: {
Type: Object
}
}
};
</script>
<style>
.row {
flex-direction: row;
margin: 5
}
.listItemDelete {
margin-left: 10;
color: red;
font-weight: bold;
}
</style>
Import TodoItem
as a component and render all the todo items inside ToDoList
component.
<template>
<view>
<view class="addToDo">
<text-input
v-model="text"
class="textInput"
/>
<button
:on-press="onAddTodo"
title="ADD"
color="#1ab2ff"
accessibility-label="Add a new todo"
/>
</view>
<todo-item
v-for="todo in todos"
:key="todo.id"
:item="todo"
/>
</view>
</template>
<script>
import TodoItem from "./TodoItem"
export default {
components: { 'todo-item':TodoItem },
data: function() {
return {
text:'',
id: 0,
todos: []
};
},
methods: {
onAddTodo: function() {
this.todos.push({text:this.text, id:this.id})
this.id++
this.text = ''
}
}
};
</script>
Test your app and it should now show added todo items.

Remove todo
The last step in this tutorial is to add a remove functionality a todo item.
Modify a text component (which displays X char) to handle on-press
event and call onRemoveTodo
method.
<text :on-press="onRemoveTodo" class="listItemDelete"> X </text>
Define onRemoveTodo
method inside ListItem
component. Line 7 will specify a parent components method via props. It will be used in next step in this exercise.
<script>
export default {
props: {
item: {
Type: Object
},
removeTodo: { type: Function }
},
methods: {
onRemoveTodo: function() {
alert("remove:" + this.item.id)
},
}
};
</script>
Test your app and it should open an Alert with unique id.

Next call parent component ListItem
to remove selected todo item. Child component can call parent method with $emit
. Modify above onRemoveTodo
method to call parents removeTodo
method.
onRemoveTodo: function() {
//alert("remove:" + this.item.id)
this.$emit('removeTodo', this.item.id)
},
Add removeTodo
method to ToDoList
component. First specify @removeTodo="removeTodo"
to created todo-item
. This is how Vue makes a connection between child and parent components. Really nice!
<todo-item
class="text-container"
v-for="todo in todos"
:key="todo.id"
:item="todo"
@removeTodo="removeTodo"
/>
And finally add removeTodo
method, which will filter object from array with id.
<script>
import TodoItem from "./ListItem";
export default {
components: { TodoItem },
data: function() {
return {
text:'',
id: 0,
todos: []
};
},
methods: {
onAddTodo: function() {
this.todos.push({text:this.text, id:this.id})
this.id++
this.text = ''
},
removeTodo(id){
this.todos = this.todos.filter(item => item.id !== id)
}
}
};
</script>
Test
Test your app and it should work now.

