How to Create Unique Slug in Laravel 9 Livewire Tutorial

Laravel generate unique slug tutorial. If you do not know how to create a slug in the laravel application, do you struggle to build this very much-needed feature in your laravel app?

Throughout this step-by-step guide, you will learn everything you need to know about how to generate a unique slug or url in the laravel app using the laravel livewire package.

What will you learn from this tutorial?

You will learn about laravel development, especially how to start from scratch; we will explain how to create an app and set up a livewire package in laravel. You will feel the power of simplicity and profoundness in development tactics to build the url slug in laravel.

Let us start revealing the laravel livewire generate slug example in detail with suggested bit-by-bit instructions.

Laravel 9 Generate Unique Slug with Livewire Example

Step 1: Download Laravel App
Step 2: Connect to Database
Step 3: Install Eloquent Sluggable Library
Step 4: Setting Up Migrations and Model
Step 5: Register Route
Step 6: Install Livewire in Laravel
Step 7: Create Livewire Component & View
Step 8: Update Blade View File
Step 9: Run Laravel Project

Download Laravel App

Having a basic laravel app on your machine is the basic requirement; if you already have then no problem, otherwise run the provided command.

composer create-project --prefer-dist laravel/laravel laravel_demo

Don’t forget to move into the project folder.

cd laravel_demo

Connect to Database

In the second section, we will demonstrate how to connect laravel to MySQL database by adding database credentials in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password

Install Eloquent Sluggable Library

Livewire is pretty straightforward to install; the installation task can be initiated with just a single command.

Open the command prompt, enter the command, and execute to start the installation process..

composer require cviebrock/eloquent-sluggable

Now, run the php artisan command to publish the vendor file related to ServiceProvider.

php artisan vendor:publish --provider="Cviebrock\EloquentSluggable\ServiceProvider"

Setting Up Migrations and Model

We will start by running a command to generate migration and model files together.

php artisan make:model Student -m

Update the app/Models/Student.php file with the values that will create the columns inside the table also the import the Sluggable service.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Cviebrock\EloquentSluggable\Sluggable;


class Student extends Model
{
    use HasFactory, Sluggable;

    protected $fillable = [
        'title',
        'slug',
    ];

    public function sluggable(): array
    {
        return [
            'slug' => [
                'source' => 'title'
            ]
        ];
    }
}

Likewise add the column names of the table into the database/migrations/create_students_table.php file.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('slug');            
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}

In the next step, you require to run the migration with the provided command.

php artisan migrate

Register Route

In this step, you need to get inot the routes/web.php this and create route for laravel livewire feature.

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/

Route::view('/create-unique-slug', 'livewire.home');

Install Livewire in Laravel

Now, the essential task comes. First, you have to run the command to install the livewire in laravel.

composer require livewire/livewire

Create Livewire Component & View

Head over to console, and run the below command to generate livewire components.

php artisan make:livewire student-component

Eventually, the suggested command created two files on the following path:

app/Http/Livewire/StudentComponent.php
resources/views/livewire/student-component.blade.php

Next, get into the app/Http/Livewire/StudentComponent.php, define functions and variables as given below.

<?php
namespace App\Http\Livewire;

use Livewire\Component;
use \Cviebrock\EloquentSluggable\Services\SlugService;
use App\Models\Student;


class StudentComponent extends Component
{
    public $title;
    public $slug;

    public function render()
    {
        $students = Student::latest()->take(9)->get();
        return view('livewire.student-componenet', compact('students'));
    }

    public function createUniqueSlug()
    {
        $this->slug = SlugService::createSlug(Student::class, 'slug', $this->title);
    }

    public function store()
    {
        Student::create([
            'title' => $this->title,
            'slug'  => $this->slug
        ]);
    }    
}

Next, you have to add the given code in resources/views/livewire/student-component.php file:

<div>
    <form wire:submit.prevent="store">
        <div class="form-group">
            <input wire:model="title" type="text" class="form-control @error('title') is-invalid @enderror" autofocus>

            @error('title')
            <span class="invalid-feedback">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
        </div>

        <div class="col-md-12">
            <button type="submit" class="btn btn-primary">
                Create Slug
            </button>
        </div>
    </form>
    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Slug</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($students as $student)
            <tr>
                <td>{{ $student->title }}</td>
                <td>{{ $student->slug }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

Update Blade View File

Eventually, create home.blade.php file inside the resources/views/livewire/ directory, then add the code in resources/views/livewire/home.blade.php file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Create Slug in Laravel Livewire App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    @livewireStyles
</head>

<body>
    <div>
        @if (session()->has('message'))
        <div class="alert alert-info">
            {{ session('message') }}
        </div>
        @endif
          @livewire('student-component')
    </div>
    @livewireScripts
</body>

</html>

Run Laravel Project

To test the application, you must need to start the laravel development server.

php artisan serve

Now, add the url on the browser and hit enter.

http://127.0.0.1:8000/create-unique-slug

How to Create Unique Slug in Laravel Livewire Tutorial

Summary

This extensive guide taught us how to create or generate slug functionality in PHP Laravel application.

We have looked at how to set up livewire in laravel and generate a unique slug in the laravel livewire app. This step-by-step laravel create url slug tutorial is ended, and we hope you will like this guide.