Alpine.js v3

Alpine.js version 3.0 will be released soon!

There is going to be an Alpine Day online event where the creator, Caleb Porzio, will be talking about some new things coming to Alpine as well as pushing the new version live!

In this quick post, let us go through some of the new features and how you can stay up-to-date about the latest version and the new release.

you can signup for Alpine Day event, you will get an email with a few things coming out in v3.

 

Global Alpine Components

Have you ever created an Alpine component, and you re-used the functionality inside of the x-data attribute?
If so, you would need to include a globally accessible function like so:

<div x-data="alpineDropdown()">
...
</div>

<script>
    window.function = alpineDropdown(){
        ...
    }
</script>

With Global Alpine Components, you can use Alpine.component() to encapsulate this functionality.

<div x-data="dropdown">....</div>

<script>
    Alpine.component('dropdown', () => ({
        open: false,
        toggle() { this.open = !this.open }
    }))
</script>

Nested Components

Currently, in Alpine v2, if you nested a component inside another component, would not be able to access the parent component easily. Now, in version 3 it’s going to be available.

 

<div x-data="{ firstName: "John" }">
    <div x-data="{ lastName: "Doe" }">
        <span x-text="firstName + ' ' + lastName"></span>
    </div>
</div>

Nested components are going to make communicating between components

 

x-init And $el:

In the current version of AlpineJS, the x-init could only be added to the parent element, but now you can add that to any element inside the component.

<div x-data="{ name: "John Doe" }">
    <span x-init="name = $el.textContent">Jane Doe</span>
</div>

Also, the $el magic property used to only return the component’s root element; however, now it will return the node element it is referenced on.

And more to come from the creator of Alpine on Alpine Day.

Alpine is the best companion for Livewire, so if you are in the Laravel space and want to learn about some of the new features coming to Alpine, be sure to signup for this event.

Happy coding ✌️

Thanks : devdojo