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

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.

Last Post!

AllanPinheiroDeLima

AllanPinheiroDeLima

Hi, I came back to say that I did the inclusion of Alpine in a slightly different manner. I’m using Alpine 3.2.1 and the snipped showed in the post helped, but didn’t solved all the problems I was having. So I’m leaving my snippet for anyone who comes across the same problem and can’t solve using the post:

Edit: I also should mention that maybe I have something wrong in my code that forces me to do things this way. I’m a beginner at Elixir/Phoenix, so if something looks off about this code or the approach, please, correct me :slight_smile:

// FIRST IMPORT THE ALPINE MODULE AS YOU ARE USED TO
import Alpine from 'alpinejs';
// I'VE ALSO ATTACHED IT TO THE WINDOW OBJECT
window.Alpine = Alpine;

let liveSocket = new LiveSocket("/live", Socket, {
    dom: {
        onBeforeElUpdated(from, to) {
            if (from.__x) {
                window.Alpine.clone(from.__x, to);
            }
            
            if (from._x_dataStack) {
                window.Alpine.clone(from, to);
                // I HAD TO INITIALIZE THE TREE EVERYTIME IT UPDATES. 
                // I WAS FACING "Alpine is not defined" ERROR WHEN I DIDN'T
                window.Alpine.initTree(to)
            }
        }
    },
    params: { _csrf_token: csrfToken },
})
...
// DON'T FORGET TO START ALPINE AND DON'T PUT THIS SNIPPET
// INSIDE THE onBeforeElUpdate HOOK. 
// I KNOW THAT SEEMS IRRELEVANT, BUT IT COULD CAUSE A MASSIVE MEMORY LEAK
// BECAUSE IT WILL DUPLICATE ALL LISTENERS EVERYTIME THE VIEW UPDATES
Alpine.start()

Thank you for the help!

Where Next?

Popular in Blog Posts Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 130579 1222
New
ErlangSolutions
An infographic that compares Erlang, Elixir, and Go’s strengths in the respect to the programming languages’ concurrency, reliability, sc...
New
shanesveller
Introduction and first content post in my new series about running Elixir Phoenix apps on Kubernetes are live! I’m describing an opiniona...
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
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
PragTob
I ran into an interesting problem recently where simple concurrency on the BEAM via Task.async made my application a lot slower and a lot...
New
hauleth
I wanted to write down some of the main guides I use when writing Elixir tests, so I have summarised them in blogpost. Furthermore, I th...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 130579 1222
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement