An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Creating a Simple Todo App with Lucia
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>
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>
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>
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(`<li>${this.value}</li>`)">Create</button> <!-- joins array together --> <ul l-join="this.todo"></ul></div>
And your Todo application with Lucia has been completed! No, really - its that easy.
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
Original Link: https://dev.to/aidenybai/creating-a-simple-todo-app-with-lucia-3p1a
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To