Create a Todo List with the Oruga Library for Vue
Tags: vue, javascript, codenewbie, webdev
Published: 2020-08-01 00:38:00

---
title: Create a Todo List with the Oruga Library for Vue
published: true
date: 2020-07-31 23:54:58 UTC
tags: Vue,javascript,codenewbie,webdev
canonical_url: https://thewebdev.info/2020/07/31/create-a-todo-list-with-the-oruga-library-for-vue/?utm_source=rss&utm_medium=rss&utm_campaign=create-a-todo-list-with-the-oruga-library-for-vue
---

The Oruga library is made by the same developer as the popular Buefy library.

It works with Vue 2.x.

In this article, we’ll look at how to create a todo list app with the Oruga library.

### Get Started

We can create a project with Vue CLI by running:

```
npx vue create todo-list

```

To get started, we run:

```
npm install @oruga-ui/oruga --save

```

or:

```
yarn add @oruga-ui/oruga

```

to install the library.

It’s also available from a CDN that we can add to our HTML with a link and script tag:

```
<link rel="stylesheet" href="//unpkg.com/oruga/dist/oruga.css" />
<script src="//unpkg.com/oruga/dist/oruga.js"></script>

```

Once we installed the library, we can use it by writing:

```
import Vue from "vue";
import App from "./App.vue";
import Oruga from "@oruga-ui/oruga";
import "@oruga-ui/oruga/dist/oruga.css";

Vue.use(Oruga);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

in `main.js` .

We add the CSS and the Oruga plugin.

The components can be added individually with `Vue.use` also.

### Building the App

To build the app, we create the form with:

```
<form @submit.prevent="addTodo">
  <o-field>
    <o-input placeholder="todo" type="text" v-model="todo"></o-input>
    <o-button type="submit">add</o-button>
  </o-field>
</form>

```

in `App.vue` .

We use the `o-field` compoennt to create the field and the `o-input` component to add the input.

`v-model` binds the input value to the `todo` state.

We add a type button with the `o-button` component.

Then we add our todo list with:

```
<div v-for="(t, i) of todos" :key="t.id" class="row">
  <div>
    <o-checkbox v-model="t.done"></o-checkbox>
  </div>
  <div :style="{'text-decoration' : t.done ? 'line-through' : ''}">{{ t.todo }}</div>
  <div>
    <o-button @click="deleteTodo(i)">delete</o-button>
  </div>
</div>

```

We render a list by using the `v-for` directive to loop through the `todos` array.

We have the `o-checkbox` to create the checkbox.

`v-model` binds to the `done` property to let us check and uncheck the box.

`t.done` is used to show the strikethrough effect if the todo is checked off.

The strikethrough effect is added with the `:style` binding.

And we have an `o-button` compoennt to let us delete the todo item when it’s clicked.

In our `script` tag, we have:

```
<script>
import { v4 as uuidv4 } from "uuid";

export default {
  name: "App",
  data() {
    return {
      todo: "",
      todos: [],
      columns: [
        {
          field: "todo",
          label: "todo"
        }
      ]
    };
  },
  methods: {
    addTodo() {
      this.todos.push({
        id: uuidv4(),
        todo: this.todo
      });
    },
    deleteTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

```

We have the states used in the templaye.

And we have some methods.

We have the `addTodo` to add a todo item with a unique ID.

And we have the `deleteTodo` method to remove the item by its index.

We layout the list rows by writing:

```
<style>
.row {
  display: flex;
  justify-content: space-between;
}
</style>

```

This lets us space out the items in the row.

Now we have:

![todo list](https://thewebdev.info/wp-content/uploads/2020/07/oruga-todo.png)

on the screen.

We can add, check off, and delete an item.

### Conclusion

Oruga is an easy to use the component library from the developer that developed Buefy.

We can use it to build interactive Vue apps.

The post [Create a Todo List with the Oruga Library for Vue](https://thewebdev.info/2020/07/31/create-a-todo-list-with-the-oruga-library-for-vue/) appeared first on [The Web Dev](https://thewebdev.info).