Introduction to Livewire - A Must-Have for Prototyping in Laravel

Step 1 - Installing a Laravel + Livewire Project

Let's start a new standard Laravel project.

Let's create our model with a migration, a factory, and a seeder:

Let's configure our 4 files:

Then, let's generate our 1000 products!

Finally, since we're going to create our tests, let's configure our database to use SQLite in memory:

Step 2 - Livewire Prototype

Let's start with our basic prototype in Livewire. To begin, let's install the library:

Installation

Then, let's add a basic page:

Step 3 - Writing Livewire Tests

Let's start with a good practice... create our Livewire component and write our tests before coding!

Livewire offers us test functions that allow us to easily interact with the state of our component.

And the result:

Since we generated the component with the test, our first test is already functional. Let's adjust our component for the next 3 tests.

Step 4 - Implementing the 3 Scenarios

Scenario 1 - Adding our Component to the Page

To add a Livewire component, simply include a tag <livewire:component-name></livewire:component-name>

This should validate our first test:

À l’aide de Tailwind UI, nous allons utiliser un composant pour facilement générer un tableau.

Et notre test fonctionne !

Et voilà ! un autre crochet vert, il nous reste plus qu’un scénario à résoudre.

Scénario 2 - Afficher un maximum de 50 produits

Pour notre composant, nous voulons afficher un maximum de 50 produits.

Scénario 3 - Filtrer les produits

Let's add a field that will be linked between our client interface and our server using the wire:model.live attribute.

We can capture the update event using the updated function.

Let's validate that everything is working...

And there you have it! Let's test our prototype in the browser.

In conclusion

Everything works! We didn't need to write a single line of JavaScript, and we have a functional prototype that connects our server and the browser in just a few minutes.

Resource : https://github.com/laradev/livewire-prototype