How to Create Auto Generate Slug with Laravel Livewire

Websolutionstuff | Oct-27-2023 | Categories : Laravel

Creating an auto-generating slug using Laravel Livewire is a practical and efficient way to handle slugs for your application. Slugs are user-friendly URLs that are derived from a title or some other relevant text. In this step-by-step guide, I'll walk you through the process of setting up an auto-generating slug feature using Laravel and Livewire.

In this step-by-step guide, I'll walk you through the process of setting up an auto-generating slug feature using Laravel and Livewire, a powerful package for building interactive web interfaces.

This tutorial will take you from the initial setup of the database to the creation of a Livewire component that dynamically generates slugs as you type.

So, let's see how to create auto generate slug with laravel 10 livewire, auto generate slug with laravel livewire, livewire slug generate, and laravel slug generator using livewire.

Prerequisites:

Before you begin, make sure you have the following in place:

  1. A Laravel project set up on your local development environment.
  2. Laravel Livewire installed in your project. If you haven't installed it yet, run the following command.
composer require livewire/livewire

A database table to store the data that will have slugs (e.g., posts table).

Now, let's proceed with creating an auto-generating slug.

Step 1: Create the Migration

You'll need a database table to store the slugs. Create a migration for it using the following command.

php artisan make:migration create_posts_table

In the migration file, add a column for the slug:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->string('slug')->unique();
        // Add other necessary columns
        $table->timestamps();
    });
}

Run the migration to create the table:

php artisan migrate

 

Step 2: Set Up the Livewire Component

Create a Livewire component to handle the slug generation. Run the following command to create a new Livewire component:

php artisan make:livewire SlugGenerator

In the app/Http/Livewire/SlugGenerator.php file, define the properties and methods needed to generate the slug. You can use the str_slug helper function to generate the slug based on the title:

use Livewire\Component;
use Illuminate\Support\Str;

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

    public function generateSlug()
    {
        $this->slug = Str::slug($this->title);
    }

    public function render()
    {
        return view('livewire.slug-generator');
    }
}

 

 

Step 3: Create a Livewire View

Create a Livewire view for the component. In the resources/views/livewire directory, create a file named slug-generator.blade.php and add the following code:

<div>
    <label for="title">Title</label>
    <input wire:model="title" type="text" id="title">
    
    <button wire:click="generateSlug">Generate Slug</button>
    
    @if($slug)
        <p>Generated Slug: {{ $slug }}</p>
    @endif
</div>

This view contains an input field for the title, a button to trigger the slug generation, and a display of the generated slug.

 

Step 4: Create a Route and Blade View

In your web.php file, create a route to display the Livewire component:

use App\Http\Livewire\SlugGenerator;

Route::get('/slug-generator', SlugGenerator::class);

Create a blade view (resources/views/slug-generator.blade.php) that includes the Livewire component.

@extends('layouts.app')

@section('content')
    <livewire:slug-generator />
@endsection

 

Step 5: Display the Slug Generator

You can now navigate to /slug-generator in your browser to see the slug generator in action. Enter a title, click "Generate Slug," and you will see the generated slug.

 

Step 6: Save the Slug to the Database

To save the generated slug to the database when creating a record, you can use Livewire events and Laravel's Eloquent model. Here's a brief outline of the process:

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Vue JS CRUD Operation Example
Laravel 9 Vue JS CRUD Operatio...

In this article, we will see the laravel 9 vue js crud operation example. Here, we will learn how to create a vue 3...

Read More

Dec-07-2022

Laravel 8 One To Many Polymorphic Relationship
Laravel 8 One To Many Polymorp...

In this tutorial we will learn about laravel 8 one to many polymorphic relationship. A one-to-many polymorphic rela...

Read More

Nov-19-2021

Laravel 9 File Upload Example
Laravel 9 File Upload Example

In this artical, we will explain the laravel 9 file upload example step by step. As we know file upload is the most comm...

Read More

Mar-11-2022

Laravel Datatables Example
Laravel Datatables Example

In this example, I will show you how to implement/install data tables in laravel. Datatables provides users with many fu...

Read More

May-16-2020