- passive income

How to create seo friendly url in laravel using vue js ?

Slug Generator using Vue Js

With the advent of Node.js and modern application endpoint routing, I find it surprising that there is no in-built function to convert any string into an URL-optimized slug.If your application users write content and you want to make their content searchable with an SEO-friendly URL, a slugify function is practically inevitable.In order to turn an article’s original title “This is demo post” into a slug optimized for URLs, parse your string through this slugify function to get “this-is-demo-post”.

In this post, I am going to share with you How to generate SEO-friendly URL in Laravel 5 application.


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 rand 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. 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.6 application setup then we have to get fresh laravel 5.6 application. So run bellow command and get clean fresh laravel 5.6 application.

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

Read also : How to upload image using custom trait in laravel

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) {

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.

<form action="{{ route('') }}" method="post">

    <div id="root">
         <label>Category name</label>
         <input type="text" placeholder="Enter title" name="name" v-model="input" required="">                            
         <label>Category slug</label>
         <input type="text" class="form-control input-sm" name="slug" :value="slug">

     <label><input type="checkbox" class="i-checks" value="1" name="isActive"> <i></i> Keep active this category ? </label>
     <button class="btn btn-success " type="submit">Submit</button>


<script type="text/javascript">
  const app = new Vue({
  el: '#root',
  data: {
    input: ''
  computed: {
    slug: function () {
      return this.slugify(this.input)
  methods: {
    slugify (text, ampersand = 'and') {
      const a = 'àáäâèéëêìíïîòóöôùúüûñçßÿỳýœæŕśńṕẃǵǹḿǘẍźḧ'
      const b = 'aaaaeeeeiiiioooouuuuncsyyyoarsnpwgnmuxzh'
      const p = new RegExp(a.split('').join('|'), 'g')

      return text.toString().toLowerCase()
        .replace(/[\s_]+/g, '-')
        .replace(p, c =>
        .replace(/&/g, `-${ampersand}-`)
        .replace(/[^\w-]+/g, '')
        .replace(/--+/g, '-')
        .replace(/^-+|-+$/g, '')


<script src="{{ asset('js/app.js') }}"></script> <!--Must Be included for slug -->

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.

Leave a comments


Recent Tweets