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-cliInstall 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-cliCreate a new project
Create a new Vue Native project called “VueToDo”
vue-native init VueToDoRun project
To get started go to your project folder and start development server.
cd VueToDo
npm startNow 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.
