How to Create SEO Friendly URL in Laravel 7 using Vue js

Hello Artisan

In this tutorial we will see how we can create seo friendly url for our website. Here i will use vue js to create unique seo friendly url. So if you don't know how to use laravel vue seo, then you are a right place. I will teach you step by step.

SEO is the most important factor for a web application. Without seo we can't rank our website to google search engine. So in this example tutorial i will show you how we can create unique slug and seo friendly url with vue js. 

We can do it using str_slug built in function. But here i will use vue not str_slug to do seo friendly url. So let's start.

SEO is very important part of website for increase users traffic. If your website have SEO-friendly URL then it can help to increase your site rank in google index, yahoo etc. So If you require to generate SEO-friendly URL in your laravel application then We can do it easily using vue js.

Read more : Laravel Notification Example From Scratch

It is cool and awesome. You can do it for your laravel application by following step or if you want to do it from scratch then you can get fresh laravel by following step

.

Step 1: Install Laravel 5.6 Application

In this step, if you haven't laravel 5.8 application setup then we have to get fresh laravel 5.8 application. So run bellow command and get clean fresh laravel 5.8 application.

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

Now we need our table . So we have to create migration. So run below command to create migration

Step 2: Create Eloquent Model & Migration

php artisan make:model Category -m

After running this command we will get categories table in our database/migrations folder. Open categories table and paste the below code.

Schema::create('categories', function (Blueprint $table) {
           $table->increments('id');
           $table->string('name');
           $table->string('slug');
           $table->integer('isActive')->default('0');
           $table->timestamps();
});

Step 3: Create Blade File to Store Data

Now we have to create our blade file to create our form. So create a blade file and paste this following code.

Our work is done. Just go to your controller and store your data. Now you can see you live slug in your slug html field. Hope it can help you. If you get any problem then please leave a comment.

Note: Make sure npm is installed in your app

Hope it can help you.