Create a Todo List with the Oruga Library for Vue

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:

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 .