DEV Community

loading...
Cover image for Creating a Simple Todo App with Lucia

Creating a Simple Todo App with Lucia

aidenybai profile image Aiden Bai Updated on ・2 min read

Hey there! I'm a @aidenybai , co-maintainer of Lucia, a tiny 3kb JavaScript library for prototyping web applications. This article will detail how to create a barebones Lucia todo application.

If you've ever used Vue or Alpine, you will be very familiar with the syntax.

Getting Started

First, make sure you have a index.html created that you are able to read/modify, as well as preview in the browser. You can easily accomplish this locally, or use a service like Codepen or Repl.it.

After that, add Lucia's CDN import script into your index.html file:

<script src="https://unpkg.com/lucia"></script>
Enter fullscreen mode Exit fullscreen mode

Assume for the rest of the code snippets in this tutorial that this import line is included.

Creating the Todo App

We first need to start with component scope initialization:

<div l-state="{ /* Need to add props */ }">

</div>
Enter fullscreen mode Exit fullscreen mode

Lucia component scope requires you to use the l-state directive (essentially just a "special" attribute for the Lucia compiler to latch on). Inside the directive value, you must pass a value that is able to return an object.

Now, lets just write the basic HTML skeleton code for the application. I want an input and a button, which will append to a ul every time the button is clicked.

If so, I will need a property to model the value of the input (value), and a property to store the tasks (todo).

<div l-state="{ value: '', todo: [] }">
  <input>
  <button>Create</button>
  <ul></ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Now, let's sprinkle in the logic with Lucia directives:

<div l-state="{ value: '', todo: [] }">
  <!-- two-way-binds `value` prop to value -->
  <input l-model="this.value"> 
  <!-- captures click event, pushing current `value` to `todo` -->
  <button l-on:click="this.todo.push(this.value)">Create</button>
  <!-- joins array together -->
  <ul l-for="task in this.todo">
    <li l-text="this.task"></li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

And your Todo application with Lucia has been completed! No, really - its that easy.

Demo

Conclusion

Want to learn more about Lucia? Check out the documentation and leave a ⭐ at the Github repo.

Final CodePen: https://codepen.io/aidenybai/pen/JjRrwjN

Discussion

pic
Editor guide
Collapse
shadowtime2000 profile image
shadowtime2000

Possibly biased opinion, but nice article.

Collapse
willdoescode profile image
Will

*based

Collapse
shadowtime2000 profile image
shadowtime2000

? I mean biased because I am a maintainer of Lucia.

Collapse
willdoescode profile image
Will

Now this is pog.

Collapse
aidenybai profile image
Collapse
simpleadam profile image
simpleAdam

whats the though process behind storing state as a string in the html.
ease of use?