Create a Todo Application with Vue Native

C

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.

Add comment

Pasi Manninen

Pasi Manninen

Pasi is a mobile and web application developer. Currently working as a senior lecturer in JAMK University of Applied Sciences. Pasi has programming experience over many decades and has taught dozens of courses since the 90's.

Recent Posts

Follow Me