Todo App Example

Below is an extremely simple implementation of a todo app using Lucia, utilizing zero JavaScript. Tasks can be added by submitting the form with the input.

Directives used:

View the live example here.

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