Snippets

Global Modals with Livewire and Alpine.js

Playing
Global Modals with Livewire and Alpine.js
18 mins2 years ago

Learn how to create and trigger modals from pretty much anywhere in your app with Livewire and Alpine.js.

Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No coments, yet. Be the first to leave a comment.

Suggested courses

Alpine.js
Livewire

Building Modals in Livewire

Build your own modal functionality in Livewire, completely from scratch! We’ll cover creating a re-usable modal wrapper, transitions, triggering modals from anywhere with our own Alpine functionality, trapping focus inside modals, layering modals correctly, and more.

11 episodes
1 hr 1 min
Alpine.js
Livewire

Build a File Marketplace with Laravel

Build a marketplace where sellers can list and sell files, while we take a cut of each sale using Stripe Connect. We'll cover onboarding users with Stripe Connect, creating products and uploading files, payments, and delivering purchased files to your customers. Here's everything we'll cover: - The Stripe Connect onboarding flow - Effortlessly creating products (and uploading files) with Livewire forms - Subdomains for your user's marketplace - Stripe Checkout for a beautiful, secure payment flow - Securely delivering files with Signed URLs in Laravel - Showing sales stats on a dashboard

34 episodes
3 hrs 32 mins
Alpine.js
Livewire

Drag and Drop Sorting With Livewire

Easily add drag and drop sorting functionality to your Livewire components with an Alpine directive, powered by Sortable.js. We’ll start with a list of ordered items, activate drag and drop sorting, and then feed the new order back to Livewire to instantly update the database. Once you’re done, you’ll be able to reuse this functionality in any of your Livewire components.

6 episodes
22 mins
Alpine.js
Livewire

Crop and Upload Profile Photos with Livewire

Using Livewire, Alpine and Cropper.js (or any cropping library), we’ll create an embeddable form field for users (or any other model) to upload profile photos. The form element will launch a modal, where users can crop and adjust their profile photo, before being able to preview and save the cropped image — or clear everything out and start again. You’ll learn: - How to launch modals in Livewire - How to use Cropper.js with Alpine - How to resize images on the backend with the spatie/image package - How to pass data between Livewire components

10 episodes
43 mins
Alpine.js
Livewire

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