Contents
Alpine.js
Light interactivity right in your HTML: x-data, x-on, x-show directives and stores.
1.Getting started
- What is Alpine.jsWhy the Alpine.js library exists, how it differs from React and Vue, and what a first example looks like.
- Installing AlpineTwo ways to add Alpine.js: a script tag from a CDN and an npm package with Alpine.start().
- x-data and component stateHow the x-data directive creates an Alpine component: data, methods, getters and nested components.
- x-text and x-htmlHow to output component data on the page: text with x-text and markup with x-html.
- x-on and event modifiersHow to react to events with x-on, the @ shorthand, and the prevent, outside, key and debounce modifiers.
2.Directives
- x-show and x-transitionHow to show and hide elements with x-show and add smooth animation with x-transition.
- x-ifHow to add and remove elements with the x-if directive and how it differs from x-show.
- x-for and keysHow to render a list with x-for: the template tag, the index, the :key attribute and removing items.
- x-bind: attributes and classesHow to bind an element's attributes, classes and styles to component data with x-bind and the colon shorthand.
- x-model and form inputsHow to bind form fields to data with x-model: text, checkboxes, selects and modifiers.
- x-init and x-effectHow to run code when a component starts with x-init and the init() method, and how to react to changes with x-effect.
- x-ref and $refsHow to name an element with x-ref and reach it from code through $refs: focus, scrolling, reading a value.
3.Components and data
- $el, $event and $nextTickAlpine magic properties: the current element $el, the event object $event, and waiting for a page update with $nextTick.
- $dispatch and $watchHow Alpine components talk to each other with custom events via $dispatch, and how to watch a property with $watch.
- Components with Alpine.dataHow to move a component's data and methods out of the markup into JavaScript with Alpine.data and reuse the component.
- Global state: Alpine.storeHow to keep shared data for several components in Alpine.store and read it through $store.
- Loading dataHow to load server data into an Alpine component: an async init(), a loading state and error handling.
4.In practice
- PluginsOfficial Alpine plugins: saving data with persist, trapping focus with focus, detecting visibility with intersect and expanding with collapse.
- Dropdown menu and tabsTwo common UI pieces built with Alpine: a dropdown menu that closes on an outside click and Esc, and switchable tabs.
- Modal and accordionA modal in Alpine with a backdrop, closing on Esc and an outside click, and an accordion with one open section.
- Alpine on server-rendered pagesHow to use Alpine in backend templates: passing data from PHP and Laravel Blade, the @js directive, Livewire and the double colon.
- Debugging and common pitfallsHow to track down errors in Alpine: console messages, x-cloak against flicker, startup order and inspecting component data.