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:

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 appeared first on The Web Dev.

Comments

[punund]

The problem with this example is once you add any other field, e.g.

<o-input type="text" v-model="desc"></o-input>

The form just stops reacting to submit event.