Lucia is a tiny JavaScript (UMD compatible) library that serves as a bridge between vanilla JavaScript and Vue. Some features of Lucia are:
- Declarative: Lucia provides a declarative API similar to Vue/Alpine to create views, making development predictable and intuitive through markup-centric code.
- Reactive: When the view is changed, the internal reference Virtual DOM will automatically react and will update and render the new view in realtime.
- Lightweight: Lucia is extremely light (~4kb min+brotli) and performant as it does not use a traditional Virtual DOM, rather it renders directives only if necessary by skipping static nodes through selectors.
Right off the bat it should be noted that Lucia should not be implemented in all use cases. Lucia aims to tackle projects that need to be quickly implemented as an experiment, and this by extension doesn't make it very good for production environments. If you are looking for something established and widely used with a similar API to Lucia, check out the similar projects.
Lucia is currently is installable through a CDN and also supports UMD (Node, Browser, Isomorphic/Universal). Put this within your <head> tags in html.
<!-- development version, includes helpful console warnings -->
<script src="https://unpkg.com/lucia/dist/lucia.js"></script><!-- production version, optimized for size and speed -->
<script src="https://unpkg.com/lucia"></script>Below is an example of a clicker game in Lucia. No, your eyes aren't fooling you - it's really that simple.
<div l-use="{ count: 0 }">
<button l-text="count" l-on:click="++count">0</button>
</div>Lucia relies on directives in markup to perform functions. You can view more in depth by visiting the documentation.
| Directive | Description |
|---|---|
l-use |
Declares a new component scope. |
l-text |
Works similarly to l-bind, but will update the textContent of an element. |
l-html |
Works similarly to l-bind, but will update the innerHTML of an element. |
l-if |
Toggles display: none; on the element depending on expression (true or false). |
l-on |
Attaches an event listener to the element. Executes JavaScript expression when emitted. |
l-bind |
Sets the value of an attribute to the result of a JavaScript expression. |
l-join |
Create new DOM nodes for each item in an array. |
l-model |
Adds "two-way data binding" to an element. Keeps input element in sync with view data. |
If you're looking for something production-ready and is widely that has a API similar to Lucia, check these projects out!
- Alpine - A rugged, minimal framework for composing JavaScript behavior in your markup.
- Stimulus - A modest JavaScript framework for the HTML you already have.
- Intercooler.js - Making AJAX as easy as anchor tags.
- Mavo - Create web applications entirely by writing HTML and CSS!
- Htmx - </> htmx - high power tools for HTML
- Unpoly - Unobtrusive Javascript Framework for server-side applications
Lucia is MIT licensed.
This project could not have been created with the inspiration from dedicated developers of the projects listed below:
- Vue for the fantastically structured API.
- Svelte for their dedication to performance and amazing banner header.
- Alpine for the component scope syntax as well as great documentation.
- Moon for the initial itch to start a lightweight JavaScript library.
As well as the developers, awesome contributors, and the CHS Magnet Program for providing this opportunity to me.
＼＿ﾍ(◕‿◕ ✰)