Create a Todo List with the Oruga Library for Vue

Image for post
Image for post
Photo by Hans van Tol on Unsplash

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:

To get started, we run:

or:

to install the library.

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

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

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:

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:

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:

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:

This lets us space out the items in the row.

Now we have:

Image for post
Image for post
todo list

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store