Dynamic Vue Components
Vue allows you to dynamically render components based on their names. This can help simplify your rendering and get rid of unnecessary logic from your templates. Here's an example using different notification types.
Comments
Suggested courses
Learn Inertia
Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API. Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API. To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.
Build an Appointment Booking System With Inertia
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course. Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments. For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots). To finish up, we’ll create an entire booking flow with Inertia (using Vue), including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment. Phew. We’ve got a lot to learn — let’s build a booking system with Inertia!
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
Chunking Large Uploads in Inertia
Effortlessly handle large file uploads in your Inertia/Vue apps with chunked, resumable uploading. We’ll cover the entire upload process for the client and server, display a progress bar, then add the ability to pause, resume and cancel uploads. From there, you’ll be able to handle huge file uploads anywhere in your applications.
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.