News Articles alpine.js

moment function not updating iteratively in dropdown item tag

In backend I am using Laraval and frontend bootstrap and Alpine! I am trying to implement a notification dropdown, where the time of the notifications received should update without refreshing the page and switching between tabs. Base version is this where I am getting the time of the notification where it shows me the "x […]

livewire – Alpine js get tag input as array

I’ve found a really cool tag input code with alpine js and tailwind css. It works just fine, but when I try to send it with my form, I always get the last tag only. I’d like to push them into an array and send along with the other elements in the form, but I […]

Why doesn’t Alpine.js work with all events from their examples?

I’m trying out Alpine.js, but some of the examples doesn’t work for me. For example <button x-on:click="alert(‘Hello World!’)">Say Hi</button> This doesn’t alert anything. <button x-on:click="console.log(‘test’)">Log</button> And this doesn’t log anything into the console. However other things work: <div x-data="{ count: 0 }"> <button x-on:click="count–">Decrement</button> <code>count: </code><code x-text="count"></code> <button x-on:click="count++">Increment</button> </div> This is my whole page: […]

How to get data only if the data is not filled in front-end using livewire and alpinejs?

For using less resources I want to fetch data from the server (using livewire) only for the first time and the other times to use the already fetched data in alpinejs. So if there is a change in my <select>, the fillStates will be triggered: <select wire:model="selectedCountry" name="selectedCountry" id="selectedCountry" wire:change="fillStates"> <option value="">Select Country</option> @foreach($this->countries as […]

AlpineJs : Cannot read properties of undefined (reading ‘focus’)

i’m using this code in codepen for OTP input field this code It works well in [email protected] but after upgrade to v3 show me this error Cannot read properties of undefined (reading ‘focus’) <div x-data="pinHandler()" x-init="$nextTick(() => { $refs[0].focus() })" class="flex items-start justify-center min-h-screen w-full bg-white p-16 pt-64"> <div class="relative p-10 pb-8 bg-indigo-500 mx-auto max-w-md […]

Implement realtime application by livewire and Alpinejs or Laravel and Vuejs?

Please help with choosing the right tool for the project I am about to undertake (I apologize for the length of the text beforehand) I am on the verge of starting a project that I really need to choose the right tools for the front-end. The back-end framework will be Laravel, but since I was […]

How to build responsive Accordion Tabs without duplicated tab content in TailwindCSS & Alpine.js?

I’m trying to build an Accordion Tabs component in TailwindCSS & Alpine.js, similar to A11y Accordion Tabs. In mobile viewports, the component should behave like an Accordion. On desktop, it should behave like Tabs. But how to avoid duplicating the same content in the page? Ideally the content inside the tab/accordion should be only in […]

Alpine JS – pass form element back to JS handler (to bind Google Maps to form element)

I am trying to build a dynamic form that users can populate with addresses auto-completed by Google Maps. This project is using Alpine JS and I would prefer not to add other frameworks. The issue is that I am having trouble instantiating the Google Maps Autocomplete object with my form elements passed to the constructor. […]

@click="open = !open" giving error when i am trying to use Alpinejs in Angular

I am trying to use Alpine with angular but i am getting this error Parser Error: Bindings cannot contain assignments at column 8 in [open = false] I have already include script of alpine in index.html but still getting this error. <div class="md:flex flex-col md:flex-row md:min-h-screen w-full"> <div @click.away="open = false" class="flex flex-col w-full md:w-64 […]

Using Alpine JS Persist Plugin to remember the active toggle/tab after refreshing/revisiting a page

I followed a tutorial and used Alpine js to place a dark mode switcher on my website. it works good, but every time a user refreshed the page they need to choose the dark mode option again. I searched online and found Persist Plugin seems like a solution, however, I don’t have any professional background, […]

Progress/voting bar

I want to make a bar/any shape object and fill it with 2 colors based on the percent between 2 numbers. I made something using Alpine JS but I don’t really like the solution, it looks pretty messy and I don’t this is the best practice. Here is the link with the working bar – […]

Fetch and Alpine.js; Component not reaction properly anymore if too many or too quick calls

Of interest is line 20: <input type="text" name="q" class="…" x-model="q" @input.debounce="fetch_images"> I tried to implement some eager loading by fetching the results on input. Since sometimes it can get a lot of images, I load them only on demand by pressing the show button. This approach works if fetching the results is also on demand. […]

Using AlpineJS (3) magic properties in javascript function

I’m using a store for a modal and like to use the magic $watch method like so:‘modal’, { init() { this.$watch(‘’, (val) => console.log(val)) // Here I like to do if(open) { document.body.classList.add(‘overflow-hidden’) } }, open: false, id: null, close() { = false = null } }) But I get TypeError: this.$watch […]

Converting inline javascript to Alpine.js

I’m trying to avoid inline javascript and would like to convert it to Alpine.js code. Is there a way to rewrite the following piece of code in Alpine.js? <script type="text/javascript"> window.addEventListener(‘DOMContentLoaded’, function () { const message = "Do you really want to remove the selected e-mail address?"; const actions = document.getElementsByName(‘action_remove’); if (actions.length) { actions[0].addEventListener("click", […]

Uncaught TypeError: Alpine.reactive is not a function

Trying to implement what describe here but reactive function is not found. There is something that I did not figure out ? <script src="" integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> const data = { selectedServer: ‘{{ servers | first }}’, loading: true, pane_visibility: true, selectServer: function(e){ this.selectedServer =‘data-url’) this.loading = true; }, iframeCharged: function(){ this.loading = […]

Show and hide Blade table rows with Alpine JS

I am using Blade with Laravel 8.x and would like to show or hide table rows using x-show in Alpine JS (v3). <table> @foreach($items as $item) <div x-data=”{show: false}”> <tr> <td> <button type=”button” x-on:click=”show = !show”> Toggle Show </button> </td> </tr> <tr x-show=”show”> <td>{{ $item->name }}</td> </tr> </div> @endforeach </table> When I do this however, […]

Form is not submitted anymore in Alpine.js V3

Clicking the button should show a spinner, and also submit the form, In Alpine V2 this was working correctly, but in Alpine.js V3 the spinner is showing correctly but the form is not submitted anymore. I tried returning true/false inside the x-on-click but that does not make a difference. In other words: How can I […]

How to execute multiple statements within a single Alpine.js attribute?

I would like to execute multiple statements within a single Alpine.js event handler (however, I believe it could be generalized to any attribute). An example of what I would like to achieve: <button x-data @click="alert(‘first’)" @click="alert(‘second’)"> Click me </button> Source: JavaSript – Stack Overflow

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.