Getting Started with Laravel Livewire

Good news for Laravel developers: Use Livewire to simplify dynamic interface construction! This article will guide you how to use Livewire, this powerful Laravel full stack framework, easily create dynamic interactive interfaces and significantly reduce the amount of JavaScript code. Livewire allows you to focus on application function development rather than tedious underlying implementations.

Core points:

• Livewire is a full-stack framework that mainly uses PHP and Blade templates to build Laravel dynamic interfaces, and has very little JavaScript code.
• This tutorial will walk you through building a CRUD app that demonstrates how Livewire handles dynamic UI updates (such as search and sorting) without page reloading.
• Livewire is an excellent alternative to Vue.js, especially for front-end framework newbies, with a smoother learning curve as it makes the most of the Laravel templates you are familiar with.
• The setup process includes creating a new Laravel project, setting up a database, installing Livewire and other necessary dependencies.
• Key features of Livewire include real-time verification, paging, and managing user interactions directly on the interface (creating, updating, and deleting users).
Optimization techniques are also highlighted in the
• Tutorials, such as using anti-shake technology to process search inputs and delayed load form submissions to improve performance and user experience.

What is Livewire?

Livewire is a library that allows you to build responsive dynamic interfaces using Blade templates and a small amount of JavaScript. "Small" is because we only need to write JavaScript to pass data through browser events and respond to them.

You can use Livewire to implement the following features without page reloading:

• Pagination
• Form Verification
• Notification
• File upload preview

It should be noted that Livewire's functions are much more than that. You can use it for more scenarios, and the above are just some of the most common scenarios.

Comparison of Livewire vs. Vue

Vue has always been the preferred front-end framework for Laravel developers to add interactivity to their applications. If you are already using Vue, then learning Livewire is optional. But if you're new to Laravel front-end development and are looking for an alternative to Vue, Livewire is a great option. Its learning curve is flatter than Vue, because you mainly use Blade to write template files.

For more information on the comparison of Livewire and Vue, check out "Laravel Livewire vs Vue".

Application Overview

We will create a real-time CRUD application. It is essentially a CRUD application that does not require page reloading. Livewire will handle all AJAX requests required to update the UI, including filtering results through search fields, sorting by column titles, and simple pagination (Previous and Next). Creating and editing users will use the Bootstrap modal box.

You can visit the GitHub repository to view the source code of this project.

Prerequisites

This tutorial assumes that you have experience in PHP application development. The Laravel experience will be helpful, but not required. If you only know pure PHP or other PHP frameworks, you can also continue to learn.

This tutorial assumes that you have installed the following software on your computer:

• PHP
• MySQL
• NGINX
• Composer
• Node and npm

If you are using a Mac, installing DBngin and Laravel Valet is more convenient than installing MySQL and NGINX.

Project Settings

You can create a new Laravel project:

composer create-project laravel/laravel livecrud

Navigate to the generated livecrud folder. This will be the root project folder where you execute all commands throughout the tutorial.

The next step is to create a MySQL database using the database management tool of your choice. Name the database livecrud.

Installing backend dependencies

We only have one backend dependency, that is Livewire. Install it with the following command:

composer require livewire/livewire:2.3

Note: We installed a specific version that I used when creating the demo. If you read this article in the future, it is recommended that you install the latest version. Be sure to check out the project change log on the GitHub repository to make sure you haven't missed anything.

Set up the database

Update the default migration to create user tables and add the custom fields we will use:

// database/migrations/<timestamp>_create_users_table.php
</timestamp>public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->enum('user_type', ['admin', 'user'])->default('user'); // add this
        $table->tinyInteger('age'); // add this
        $table->string('address')->nullable(); // add this
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}

Next, update the database/factories/UserFactory.php file and provide the value for the custom fields we added:

// database/factories/UserFactory.php
public function definition()
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique()->safeEmail,
        'email_verified_at' => now(),
        'password' => 'yIXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween(18, 60),
        'address' => $this->faker->address,
    ];
}

Finally, open the database/seeders/DatabaseSeeder.php file and uncomment the call to create the virtual user:

// database/seeders/DatabaseSeeder.php
public function run()
{
    \App\Models\User::factory(100)->create();
}

Don't forget to update your .env file with the test database you will be using. In this case, I named the database livecrud. Once done, run the migration and seeder to populate the database:

php artisan migrate
php artisan db:seed

Set front-end dependencies

To simplify operations, we will use Laravel scaffold for Bootstrap. To do this, you first need to install the laravel/ui package:

composer require laravel/ui

Next, install Bootstrap 4. This will add configuration in your webpack.mix.js file and create resources/js/app.js and resources/sass/app.scss files:

php artisan ui bootstrap

Next, add Font Awsome to resources/sass/app.scss file. By default, it should already contain fonts, variables, and bootstrap imports:

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// add these:
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";

After finishing, install all dependencies:

npm install @fortawesome/fontawesome-free
npm install

(Next steps, due to space limitations, you will be output in segments. Please continue to ask questions to get the rest)

The above is the detailed content of Getting Started with Laravel Livewire. For more information, please follow other related articles on the PHP Chinese website!