Alpine.js courses

Course
Laravel
Livewire
Alpine.js
Build a Livewire Drag & Drop Uploader

Build a multiple file drag-and-drop uploader with Livewire and Alpine.js. Using Alpine and Livewire’s JavaScript API, we’ll directly hook into the JavaScript drop event and kick off the upload progress, validating files and showing a progress bar along the way. So, if you need drag-and-drop uploading in your Laravel project, this course has you covered!

9 episodes
43 mins
Course
Alpine.js
Build a Notes App with Alpine.js

Put Alpine.js state management to the test by building a fully working notes app in the browser.

11 episodes
55 mins
Course
Alpine.js
Alpine Store Basics

Forget dispatching events to keep your state together. In Alpine, stores give you a central location for data that make state management a breeze. In this series, we'll cover everything you need to know to get started with Alpine stores!

5 episodes
29 mins
Course
Alpine.js
Learn Alpine.js

Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along the way.

19 episodes
2 hrs 10 mins
Course
Laravel
Alpine.js
Meilisearch Instant Search with Alpine.js

Combining the power of Meilisearch and the simplicity of Alpine.js to build an instant, as-you-type, result-highlighted dropdown search. We’ll cover making the Alpine.js component highly re-usable, so you can use it in multiple places, or with an entirely different index and options.

12 episodes
42 mins
Snippet
Alpine.js
Alpine.js Auto Textarea Height

With a sprinkle of Alpine.js code, create a textarea that expands in height to fit content as a user types.

1 episode
6 mins
Course
Alpine.js
Slim
Instantsearch with TNTSearch and Alpine.js

Add instantsearch functionality to any data with the power of TNTSearch, and the simplicity of Alpine.js.

9 episodes
53 mins
Course
Laravel
Livewire
Alpine.js
Build a Multi-room Realtime Chat with Livewire

Join a room and start chatting! This course covers building a multi-room text chat app with Laravel Livewire, including Laravel Websockets for realtime updates, and a sprinkle of Alpine.js to handle showing when a user is typing in realtime.

11 episodes
1 hr 23 mins
Course
Alpine.js
Alpine.js State Management with Spruce

Missing state management in Alpine.js? Meet Spruce, a lightweight state management layer for Alpine.js that makes managing state between components a breeze. Core Alpine.js team member and Spruce author, Ryan Chandler, walks us through using it.

5 episodes
9 mins
Snippet
Alpine.js
Build an RSS reader with Alpine.js

Just for fun, let's build a simple RSS reader with Alpine.js that fetches and renders entries from a list of your chosen RSS publications.

1 episode
14 mins