stryrckt

stryrckt

Using LiveView with AlpineJS

Support for AlpineJS in LiveView was added in 0.13.3 and it works fabulously. I just wrote a blog article about it and plan another one soon on transitions with AlpineJS and Tailwind CSS.

Most Liked Responses

stryrckt

stryrckt

I just published a follow-on article showing how to use AlpineJS and Tailwind CSS to create LiveView modals.

stryrckt

stryrckt

If you are using the latest version of Alpine.js (v3), you will need to make some changes in how you set it up.

Alessandro Di Maria has a short guide on the changes you need to make in this article: Update LiveView for Alpine.js 101 - DEV Community.

stryrckt

stryrckt

You can certainly use localStorage from Alpine, as this article demonstrates: Sync Alpine.js x-data to localStorage/sessionStorage · Code with Hugo. So if you are skeptical about pulling in another framework, it is probably good enough.

For me, Spruce is nice because it integrates well with Alpine, allows you to watch for changes in state, and it works with x-model.

Where Next?

Popular in Blog Posts Top

marcelo
Long story short, over the past years we’ve been scaling our operation quite a lot at Unbabel. Most of our codebase is Python and some of...
New
brainlid
There is a new community resource available on writing “Safe Ecto Migrations”. When we get a migration wrong, it can lock up your product...
New
aymanosman
This is a very short article about using AWS Systems Manager Parameter Store to load secret configuration in a simple way.
New
brainlid
Building a LiveView powered chat app is easier than ever when using Streams! Sophie DeBenedetto shows us how in this article. She createa...
New
axelson
I talk about how I really like to use runtime configuration and discuss some common pitfalls of configuration in Elixir.
New
JEG2
I’m closing out, for now, my series on questions at the heart of development with an analysis of when we need more abstraction. For exam...
New
mssantosdev
This post is a guide on how Norba and I are building LiveMatch, a real-time app for soccer to follow multiple games in one place. https:...
New
ConnorRigby
Just finished a post for Embedded Elixir and I thought it should be cross-posted here: https://embedded-elixir.com/post/2018-09-25-mocks...
New
AstonJ
Update: How to use the blogs section You can post in one of the Official Blog Posts threads (like this one), or, via Devtalk and a new t...
New
rlopzc
Use the new log handlers to plug Slack or any other provider into your logging system. https://rlopzc.com/posts/integrate-slack-into-the...
New

Other popular topics Top

lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement