Livewire — An Easy Way To Build Dynamic Web Applications (Part 1)

If you’re reading this small article probably worked with laravel framework, but did you heard about livewire?

In this first part of this article, i will be introducing you to create a small project and make the basics.

Before we start, i suppose you know the basics of laravel, so we gonna start a new project.

1.Installation

Open the command prompt and create a new laravel project using composer.

composer create-project laravel/laravel app-name

After you created the project, we need to install livewire.

composer require livewire/livewire

2.The Basics

2.1 Where I Place The Views ?

The main view that runs livewire needs to add @livewireStyles before </head> tag and @livewireScripts before </body> tag.

The views that use livewire components need to be placed in folder views/livewire.

2.2 Where I Place Livewire Components ?

Livewire components need to be placed by default in the folder app/Http/Livewire, when your view have extra folders, they have to be in the same namespace.

2.3 An Easy Way To Create View And Component

Livewire has a built-in command to easy create the component and view, you can use the prompt to run this command.

php artisan make:livewire example-livewire

They will create two files

App/Http/Livewire/ExampleLivewire.php

Resources/Views/Livewire/example-livewire.blade.php

3. Let’s Write Some Code

When you have made all actions above, let’s write some code just to show how livewire works.

3.1 The Main View

In the file resources/views/welcome.blade.php replace all the code for this.

3.2 The Livewire View

In the file resources/views/livewire/example-livewire.blade.php put this code.

3.2 The Livewire Component

In the file app/Http/Livewire/ExampleLivewire.php put this code.

4. The Result

Now you can go to the form, insert data in the fields and click button Submit, a message with name and surname will be displayed. In the next part of this tutorial we gonna implement the CRUD methods.