A demo app using Laravel 8 and Livewire 2 showing how to implement a list of articles and tags, via a polymorphic relationship, that can be searched and/or filtered by tags.
The Tag list shows the article count of each tag and works with pagination. Tags are colored* (via a color attribute on the db) to be easier to see they working. You cam select multiple tags and the filter will update the list of items.\
-
Version 1 works with just one model at a time. This is the version on the Main branch. This demo provides a SQLite database (database/database.sqlite) already populated with 100 articles, and 50 tags, so you don't need to migrate the DB to see things working. But you can also seed the database with the provided seeder classes by running
php artisan migrate --seed
after updating your .env file. -
Version 2, a bit more complex, is a multimodel version, listing both articles and videos. Get it on branch search-multiple-models. It requires /protonemedia/laravel-cross-eloquent-search
You can see it live here: https://livewire.sergiojardim.com/
livewire-multi-model-search-with-filtering.mp4
- Clone the repo
- Run
composer install
- Rename
.env.example
to.env
and change the database settings according to your machine - Run
php artisan migrate --seed
to load fake content into your database - Run
php artisan serve
if you are not using Laravel Valet.
You don't need to run npm install
as we are using Tailwind CSS 3.0 via its CDN on layouts/app.blade.php
. :)
Loading 10 articles (titles + date + tags) per page and the 15 most used tags on my 13" MacBook Pro M1, Laravel DebugBar took on subsequent page loads:
- Using the provided SQLite database: less than 50ms using 2MB of RAM.
- Using the a MySQL 8.0.22 database: less than 80ms using 2MB of RAM.
This demo app is an updated and improved version of my old Livewire 1 demo which was based from /breadthe/laravel-livewire-demo.
*Note: the tags colors were generated randomly and text contrast sometimes is bad, please on a real app consider fixing this for a better UX.