Freek Van der Herten's blog on PHP, Laravel and JavaScript

Posts tagged with livewire

How to add a spotlight-like search field to your Laravel app

May 19th 2022 by Freek Van der Herten – 6 minute read

As developers, we tend to like shortcuts to speed up our workflow. One of the tools I'm using to speed up doing stuff on my Mac is Raycast. It offers a lovely command palette that allows opening apps and URLs, working with clipboard history, and much more.

Wouldn't it be nice to also add such a command palette to a Laravel app? This way, power users of your app can get around quickly and perform small tasks without having to click around.

The good news is that there's already a package to add such a thing: Spotlight by Philo Hermans. In this blog post, I'd like to show how we use this fantastic package at Oh Dear.

How to build modals with Laravel and Livewire

Apr 15th 2022 – philo.dev

A super nice way to go about this, thanks to Philo. Cool stuff!

Better support for Livewire in Flare and Ignition

Nov 29th 2021 – flareapp.io

The default Laravel error page now has a dedicated Livewire tab.

Multi-Input Sorcery And Other Laravel Livewire Tips

Nov 15th 2021

Daniel Coulbourne shares some cool Livewire insights.

Laravel Worldwide Meetup #11: Building APIs & Models/Spotlight With Livewire

Oct 28th 2021 by Freek Van der Herten – 1 minute read

Here's the recording of the latest edition of the Laravel Worldwide meetup. Philo Hermans showed off two great Livewire packages that he made. Steve McDougall did a cool live coding session on how to build APIs. And at the end, our suprise guest Caneco gave a nice little presentation on Lumen as…

How Livewire works (a deep dive)

Oct 12th 2021 – calebporzio.com

The experience of using Livewire seems magical. It's as if your front-end HTML can call your PHP code and everything just works. A lot goes into making this magic happen.

How to start and stop polling in React and Livewire

Oct 4th 2021

Last week, support for Telegram notifications was added to both Flare and Oh Dear. Let's take a look at how both these services connect to Telegram. We'll focus on how polling is used in the connection flow and how polling can be stopped once the necessary data has been received.

How to customize Jetstream and Laravel Spark

Mar 2nd 2021 by Freek Van der Herten – 16 minute read

In this blog post, I'd like to share how we moved from classic to modern Spark for billing and Jetstream for team management. You'll also learn various ways how to customize Spark to your liking.

Flashing Banner Messages in Your Laravel Jetstream and Livewire Applications

Feb 20th 2021 – ryangjchandler.co.uk

Learn how you can use Jetstream's out-of-the-box banner component to show flash messages to your users.

Display real-time progress of batched jobs using Livewire

Feb 1st 2021 – twitter.com

Using @LaravelLivewire it is incredibly easy to display real-time progress of batched jobs! 🔥

Just drop in this simple trait & blade component and you're off to the races #hottip pic.twitter.com/I6K1zalzeJ
— Willem Leuverink (@gwleuverink) January 18, 2021

A newsletter to keep up-to-date with Livewire

Dec 4th 2020 – livewire.run

This is a great newsletter run by Liam Hammett. Here's the latest edition, so you know what you're getting into.

Splitting a large Laravel Livewire Component

Dec 2nd 2020 – www.csrhymes.com - submitted by Chris Rhymes

Splitting up a large Laravel Livewire component into more manageable and maintainable chunks

Creating a "Marked as Completed" button using Livewire

Oct 5th 2020 by Freek Van der Herten – 1 minute read

In this video, which is part of the Laravel Package Training, I show you how the "Marked as Completed" button under each video works.

Video: building a realtime dashboard power by Laravel and Livewire

Aug 9th 2020 by Freek Van der Herten – 1 minute read

Earlier this year, our team released laravel-dashboard, a package that allows you to set up powerful dashboards in no time! In this talk, given at this years Laracon EU Online, I demonstrate how you can use it and how it works under the hood. Want to see more package source dives? Considering…

Refactoring to Livewire polling

Jun 30th 2020 – johnbraun.blog - submitted by John Braun

John Braun shares why and how he refactored to Livewire polling and replaced the event-driven WebSockets approach.

Embracing The Tall Stack with Event Sourcing, an adventure into the unknown

Jun 4th 2020 – www.juststeveking.uk

Steve King wrote a nice introduction on how to use our event sourcing package together with Livewire. Cool stuff!

Tracking Queued Job Chains in Laravel

May 11th 2020 – blog.rafter.app - submitted by Josh Larson

Learn how to track and visualize a chain of queued jobs in Laravel using a custom trait, job middleware, and Laravel Livewire.

Building a realtime dashboard powered by Laravel, Livewire and Tailwind (2020 edition)

Apr 29th 2020 by Freek Van der Herten – 23 minute read

At Spatie we have a TV screen against the wall that displays a dashboard. This dashboard displays the tasks our team should be working on, important events in the near future, which tasks each of our team members should be working on, what music they are listening to, and so on. Here's what it looks like:

dashboard

This dashboard is built using our laravel-dashboard package. It will allow you to built a similar dashboard in no time.

In this blogpost I'd like to walk you through both the dashboard and the package.

Replacing websockets with Livewire

Apr 10th 2020 by Freek Van der Herten – 11 minute read

Up until a few days ago, the real-time UI of Oh Dear (an uptime monitoring SaaS I run) was powered with web sockets. We recently replaced this with Livewire components.

In this blog post, I'd like to explain why and how we did that.

I'm going to assume that you already know what Livewire is. If not, head over to the Livewire docs. There's even a short video course on there. In short, Livewire enables you to create dynamic UIs using server-rendered partials.

Building complex forms with Laravel Livewire in Oh Dear

Mar 23rd 2020 by Freek Van der Herten – 16 minute read

Together with my buddy Mattias Geniar, I run Oh Dear, an uptime checker service on steroids.

Unlike most uptime trackers, Oh Dear doesn't only check your homepage, but every single page of your site. When we detect a broken link or some mixed content, we send a notification. Oh, and we provide status pages, like this one from Laravel and Flare too.

In this blog post, I'd like to show you how we use Livewire to render some complex forms in the UI of Oh Dear.