How To Livewire Generate New Slug In Laravel 8?




How To Livewire Generate New Slug In Laravel 8?

Hi Dev,

This example is how to livewire generate new slug in laravel 8?.

We will teach you the simple and the best way on how to generate slug in the Laravel 8 application using the livewire package.

This example is short code and easy way for user.

This laravel livewire create slug example, we will install a brand new laravel app, install and set up the livewire plugin, then create model, view and controllers.

How to Generate Slug in Laravel with Livewire Package.

So let's start following example.

Step 1 - Create Fresh Laravel Project

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

Don’t forget to get inside the app’s root:

cd Blog

Insert Database Details in ENV







Step 2 - Add Livewire Library in Laravel

Its easy to install the livewire package into the laravel; you have to open the terminal, type command, and execute to begin the installation process.

composer require livewire/livewire

Step 3 - Add Eloquent Sluggable Package in Laravel

In the further step, you have to install the eloquent sluggable package, and this library will help you generate slug in laravel.

Make sure to run the following command to install the plugin.

composer require cviebrock/eloquent-sluggable

Step 4 - Publish Sluggable Config File

Now laravel slug package has been installed; now, you have to register this package for starting the creation of slugs as per the laravel eloquent models.

Let us execute the command to publish the configuration file in laravel.

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

Step 5 - Create Model and Migrations

Let us create a migration and model files; theoretically, these files help in creating the table into the database.

Run the below command to generate a migration and model simultaneously.

php artisan make:model Blog -m

Open app/Models/Blog.php and add the values in the newly generated models file.


namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

use Cviebrock\EloquentSluggable\Sluggable;

class Blog extends Model


use HasFactory,Sluggable;

protected $fillable = [




public function sluggable(): array


return [

'slug' => [

'source' => 'blog_title'





Open database/migrations/create_blogs_table.php and insert the table properties within the migration file.


use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration



* Run the migrations.


* @return void


public function up()


Schema::create('blogs', function (Blueprint $table) {








* Reverse the migrations.


* @return void


public function down()





Now, go to console, type the recommended command to run the migration.

php artisan migrate

Step 6 - Create Route in Laravel

Open the routes/web.php in this file you need to define the route.


use Illuminate\Support\Facades\Route;



| Web Routes



| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!



Route::view('/generate-slug', 'welcome');

Step 7 - Set Up Livewire Component

Next, you have to execute the following command to generate the livewire blog components.

php artisan make:livewire Blogs

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



Open and update the below code in app/Http/Livewire/Blogs.php file:


namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Blog;

use \Cviebrock\EloquentSluggable\Services\SlugService;

class Blogs extends Component


public $blog_title;

public $slug;

public function render()


$blogs = Blog::latest()->take(7)->get();

return view('livewire.blogs', compact('blogs'));


public function generateSlug()


$this->slug = SlugService::createSlug(Blog::class, 'slug', $this->blog_title);


public function store()



'blog_title' => $this->blog_title,

'slug' => $this->slug




Open and update the below code in resources/views/livewire/blogs.php file:


<form wire:submit.prevent="store">

<div class="form-group">

<label for="blog_title" class="mb-2"><strong>Blog Title</strong></label>

<div class="col-md-12 mb-3">

<input wire:model="blog_title" type="text" class="form-control @error('blog_title') is-invalid @enderror" autofocus>


<span class="invalid-feedback">

<strong>{{ $message }}</strong>





<div class="col-md-12">

<div class="d-grid">

<button type="submit" class="btn btn-dark">

Create Blog





<table class="table mt-5">



<th>Blog Title</th>





@foreach ($blogs as $blog)


<td>{{ $blog->blog_title }}</td>

<td>{{ $blog->slug }}</td>






Step 8 - Set Up Blade View

In the last step, make sure to head over to resources/views/livewire/ folder, you have to create the welcome.blade.php file in this directory and after that insert all the given below code in the suggested file:

Update resources/views/livewire/welcome.blade.php file.

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">


<meta charset="utf-8">

<title>Implement Slug in Laravel Livewire Example -</title>

<link href="" rel="stylesheet">




<div class="container mt-3">

@if (session()->has('message'))

<div class="alert alert-primay">

{{ session('message') }}








Step 9 - Start Laravel App

The last task is to start the laravel development server, go to terminal and run the given below command to run the app.

php artisan serve

Open your browser below url and view the app.



I hope it can help you....

#Laravel 8




#Laravel 6