Alpine.data()
Globally register and re-use the data portion of a component.
alpine:init event
Fires after Alpine loads but before it initializes itself on the page.
alpine:initialized event
Fires after Alpine has finished initializing.
Alpine.store()
Register a global store referenced via the $store() magic method.
Auto-evaluate init() method
An init() method in the x-data object is called automatically.
Automatically evaluate init() functions defined on data object
Breaking Changes
Scope
Properties in x-data are available to all element children, including nested components.
Data-less Alpine
Use Alpine functionality without passing an expression to x-data.
Data-less components
Create an Alpine component without data by passing an empty object or no value.
$watch
Hooks into data changes using a dot-notation key and passes new and old values.
$el is now always the current element
Getters
JavaScript getters return data based on other state, like computed properties.
Headless Alpine Components
Headless Alpine components with copy-pastable source code.
init() method
Alpine automatically calls init() methods stored on a data object.
Magic Properties
Access $store, $el, $dispatch, $watch, $refs, and $nextTick.
Methods
x-data is evaluated as a JavaScript object, so it can store methods and getters.
Need to call Alpine.start() after import
Nesting data
Child elements can access parent data; child properties take precedence.
$nextTick magic
Waits until Alpine has finished rendering before executing code.
NPM module installation
Install Alpine via NPM and import it into a bundle.
Returning false from event handlers no longer implicitly "preventDefault"s
Re-usable Data
Extract the x-data object to a dedicated component using Alpine.data.
Screencasts
In-depth screencasts accompany every UI component.
Script tag inclusion
Include Alpine via a script tag with the defer attribute, e.g. from the jsDelivr CDN.
Single-element components
Declare x-data directly on a single element inside the component.
Standalone x-init
Can be added to elements inside or outside an x-data block.
Third-party Integrations
Custom code and tutorials for integrating popular open source libraries.
UI Components
Robust Alpine components like modals, dropdowns, tabs, and more.
Upgrade from V2
Use global lifecycle events instead of Alpine.deferLoadingAlpine()
x-bind
Binds HTML attributes such as class, style, and disabled.
x-cloak
Hides elements until Alpine has initialized.
x-data
Declare an HTML block's state in a single attribute without leaving markup.
x-data cascading scope
x-data component
A component must be defined with x-data for Alpine.js attributes to work.
x-data directive
Defines an HTML chunk as an Alpine component and provides reactive data.
x-effect directive
Runs provided code immediately and re-runs it when any used data changes.
x-for
Repeat a block of HTML based on a data set.
x-id
Generates unique IDs for accessible element associations.
x-if
Adds and removes elements from the DOM using a template tag.
x-if no longer supports x-transition
x-init directive
Executes JavaScript when Alpine begins initializing an element.
x-init directive
Hooks into the initialization phase of any element in Alpine.
x-init no longer accepts a callback return
x-model
Synchronize a piece of data with an input element.
x-on
Listens for events on an element and runs a JavaScript expression.
x-on .outside modifier
Listens for a click outside the element instead of inside.
x-ref
Registers a reference to a DOM element for direct access via $refs.
x-show
Toggles element visibility via display: none.
x-show.transition is now x-transition
x-spread is now x-bind
x-text
Sets the text content of an element.
x-transition
Applies smooth transitions between shown and hidden states.