Hello friends, my name is Suresh K Solanki, and I am a blogger and coder who helps you solve problems when you are in trouble. In this blog, I am going to explain an important topic about Laravel Livewire—how to create your first component in Laravel Livewire 3.
So, let’s get started! Here, I am sharing code examples and Composer commands that will surely help you build your first component.
How to create first component in Laravel Livewire?
So developers, first of all, you need to understand what components are. In simple terms, it is a UI block that renders when a URL changes or a route is called. If you are familiar with ReactJS or Angular, you can easily understand components. But simply put, it is a UI block that runs with Livewire.
Now, about how to create your first component in Livewire: before doing this, you must know how to install Livewire in a Laravel project. This will help you understand how to make your first component.
Install Laravel Livewire
Before you start, I assume that you already have a Laravel project installed and your server is running using the Artisan command. Now, install Livewire with this command:
composer require livewire/livewire
After running this command in your Laravel project root, it will take some time to install important Livewire files. Once done, you can confirm that Livewire has been installed successfully.
How to verify
Now, how can you check if Livewire has been installed? There are two ways to verify:
Through composer.json file
Open your Laravel project root and find the composer.json file. Open it and look under dependencies for Livewire. You should see something like:
“livewire/livewire”: “^3.x”
- Once you find this, take a deep breath and relax—Livewire has been installed.
Through the vendor folder : In the same Laravel project root, open the vendor folder. Inside, you should see a new folder named livewire, containing important files like CSS files, JS files, and PHP files. This also confirms that Livewire has been installed successfully.
Create your first component
Now that Livewire has been installed, open your code editor. I assume you are using VSCode by Microsoft. If you are using any other editor, just open the Laravel project root and run CMD/terminal in the same folder.
Run this command:
php artisan make:livewire name_of_your_component
After running this command, your first component will be created. You can find it in the folder:
app/Http/Livewire/name_of_your_component.php
Open this file, and you will see that the component has been successfully created.
Make first route with component
Once your component has been created, you need to create a route. It’s similar to creating a route with a controller and method.
- Open the web.php file under the routes folder.
- First, import your component at the top of the file:
use App\Http\Livewire\NameOfYourComponent;
- After importing, create a route just like you do with a controller. Instead of using a controller method, use the component class:
Route::get(‘/your-route’, Name_of_your_component::class);
This will link your component to a URL, and now it’s ready to render.
List Livewire to blade
When you create your first component, a Blade file is also created under:
resources/views/components/name_of_your_component.blade.php
Open this file, and you can edit all kinds of UI elements and parts here. This is where you design how your component will look and behave on the page.
Call JS and CSS of livewire in blade
Once Livewire is installed and your component is created, now the main thing is to initialize your app Blade.
- Create a new Blade template and save it under:
resources/views/layouts/app.blade.php
Keep the name exactly app.blade.php.
- Open this file and add the following:
In the <head> tag, add:
{{ @livewireStyles }}
Before the closing </body> tag, add:
{{ @livewireScripts }}
In the main body of app.blade.php, use:
{{ $slot }}
This sets up the main layout so that all your Livewire components can render properly.
After doing all these steps, your component is ready. Now, optimize your code by running the Artisan command:
php artisan optimize
Then, open your route URL in the browser, and you will see that your component is running successfully.
Final words
I hope you have learned how to create your first component. Now, you can use it in your project and follow this blog for more tips and tutorials.
