Category Archives: Laravel

Laravel Tutorials

Vue JS And Laravel 8 Like Dislike Tutorial Example

In this Laravel 8 Vue JS Like Dislike Example Tutorial I’ll show you how to implement Like Dislike with Vue Js in laravel 8. In this tutorial you will learn to create Like Dislike with Vue Js in laravel 8. In this article I will demonstrate you with example how to implement Like Dislike with Vue Js in laravel 8.

Vue JS And Laravel 8 Like Dislike Tutorial Example

In this step by step tutorial we will learn to implement Like Dislike with Vue Js in laravel 8. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Create Migration Files
Step 4: Create Models
Step 5: NPM Configuration
Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component
Step 9: Initialize Vue Components
Step 10: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Migration Files

Now, in this step we will create migration file. Please run the following command:

php artisan make:migration create_countries_states_table

1	php artisan make:migration create_countries_states_table

Now open create_countries_states_table.php migration file from database>migrations and replace up() function with the following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCountriesStatesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->timestamps();
        });
        Schema::create('states', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('country_id');
            $table->string('name');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('countries');
        Schema::dropIfExists('states');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateCountriesStatesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->timestamps();

});

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

$table->bigIncrements('id');

$table->integer('country_id');

$table->string('name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('countries');

Schema::dropIfExists('states');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: Create Models

Now, in this step we will create model file. Please run the following command:

php artisan make:model Country
php artisan make:model State

1 2	php artisan make:model Country php artisan make:model State

Step 5: NPM Configuration

Install all Vue dependencies:

npm install

1	npm install

To calling Laravel API routes. You need to install vue-axios. So use run the following command on command prompt:

npm install vue-axios --save

1	npm install vue-axios --save

After installing all dependencies run this command:

npm run watch

1	npm run watch

Step 6: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\CountryStateController;
 
Route::get('get_countries', [CountryStateController::class, 'getCountries']);
Route::post('get_states', [CountryStateController::class, 'getStates']);

use App\Http\Controllers\CountryStateController;

Route::get('get_countries', [CountryStateController::class, 'getCountries']);

Route::post('get_states', [CountryStateController::class, 'getStates']);

Step 7: Create Controller By Command

Now, lets create a controller named CountryStateController using command given below –

php artisan make:controller CountryStateController

1	php artisan make:controller CountryStateController

Go to app\Http\Controllers and open CountryStateController.php file. Then update the following code into your CountryStateController.php file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Country;
use App\Models\State;
class CountryStateController extends Controller
{
    /**
     * Retrieve countries data
     *
     * @return void
     */
    public function getCountries()
    {
        $data = Country::get();
        return response()->json($data);
    }
    /**
     * Retrieve states data
     *
     */
    public function getStates(Request $request)
    {
        $data = State::where('country_id', $request->country_id)->get();
        return response()->json($data);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Country;

use App\Models\State;

class CountryStateController extends Controller

{

/**

* Retrieve countries data

* @return void

public function getCountries()

{

$data = Country::get();

return response()->json($data);

}

/**

* Retrieve states data

public function getStates(Request $request)

{

$data = State::where('country_id', $request->country_id)->get();

return response()->json($data);

}

Step 8: Create Vue Component

In this step we will create a Vue component. Go to resources/assets/js/components folder and create a filed called DropdownComponent.vue. And put the following code into your DropdownComponent.vue. components file:

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Laravel 8 vue.js Dependent Dropdown Example</span>
        </div>
        <div class="row justify-content-center" style="margin: 20px 0px 20px 0px;">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label>Select Country:</label>
                            <select class='form-control' v-model='country' @change='getStates()'>
                                <option value='0' >Select Country</option>
                                <option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Select State:</label>
                            <select class='form-control' v-model='state'>
                                <option value='0' >Select State</option>
                                <option v-for='data in states' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                country: 0,
                countries: [],
                state: 0,
                states: []
            }
        },
        methods:{
            getCountries: function(){
                axios.get('/get_countries')
                    .then(function (response) {
                        this.countries = response.data;
                    }.bind(this));
            },
            getStates: function() {
                axios.get('/get_states',{
                    params: {
                        country_id: this.country
                    }
                }).then(function(response){
                    this.states = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getCountries()
        }
    }
</script>

<span class="text-secondary">Laravel 8 vue.js Dependent Dropdown Example</span>

</div>

<label>Select Country:</label>

<option value='0' >Select Country</option>

</select>

</div>

<label>Select State:</label>

<option value='0' >Select State</option>

</select>

</div>

</template>

export default {

data(){

return {

country: 0,

countries: [],

state: 0,

states: []

}

methods:{

getCountries: function(){

axios.get('/get_countries')

.then(function (response) {

this.countries = response.data;

}.bind(this));

getStates: function() {

axios.get('/get_states',{

params: {

country_id: this.country

}

}).then(function(response){

this.states = response.data;

}.bind(this));

}

created: function(){

this.getCountries()

}

</script>

Now open resources/assets/js/app.js and include the FileUpload.vue component like this:app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('dropdown-component', require('./components/DropdownComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('dropdown-component', require('./components/DropdownComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 9: Initialize Vue Components

Go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file. Go to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}"/>
    <title>How to make dependent dropdown with Vue. js and Laravel
</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <dropdown-component></dropdown-component>
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

<!doctype html>

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

<head>

<title>How to make dependent dropdown with Vue. js and Laravel

</title>

</head>

<body>

<dropdown-component></dropdown-component>

</div>

</body>

</html>

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or
npm run watch

npm run dev

npm run watch

Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone

In this Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone Example tutorial, I will show you how to upload image file using dropzone drag and drop. In this tutorial you will learn to implement drag and drop image upload using dropzone package with Vue Js in laravel. In this tutorial we learn to :-

Uploading multiple images with dropzone
Saving images with unique file names to database

Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone

Step 1: Install Laravel 8 App
Step 2: NPM Module Configuration For Vue Js
Step 3: Add Routes
Step 4: Create Controller By Command
Step 5: Create ImageUplaod Vue Component
Step 6: Create Blade Views And Initialize Vue Components
Step 7: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: NPM Module Configuration For Vue Js

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

After that, install vue dropzone dependencies by using the below command:

npm install vue2-dropzone

1	npm install vue2-dropzone

Step 3: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\ImageController;
 
Route::post('store-multiple-image', [ImageController::class, 'store']);

use App\Http\Controllers\ImageController;

Route::post('store-multiple-image', [ImageController::class, 'store']);

Step 4: Create Controller By Command

Now, lets create a controller named ImageController using command given below –

php artisan make:controller ImageController

1	php artisan make:controller ImageController

Now, go to app\Http\Controllers and open ImageController.php file. Then put the following code into your ImageController.php file:

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
   
class ImageController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $imageName = time().'.'.$request->file->getClientOriginalExtension();
        $request->file->move(public_path('images'), $imageName);
          
        return response()->json(['success'=>'You have successfully upload file.']);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller

{

/**

* success response method.

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$imageName = time().'.'.$request->file->getClientOriginalExtension();

$request->file->move(public_path('images'), $imageName);

return response()->json(['success'=>'You have successfully upload file.']);

}

Step 5: Create ImageUplaod Vue Component

In this step we will create a Image upload component. Now, go to resources/assets/js/components folder and create a file called MultipleImageUploadComponent.vue. Then put the following code into your MultipleImageUploadComponent.vue components file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                        <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
  
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
   
    export default {
     components: {
        vueDropzone: vue2Dropzone
      },
      data: function () {
        return {
          dropzoneOptions: {
              url: '/store-multiple-image',
              headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
               }
          }
        }
      },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

<div class="card-header">Example Component</div>

I'm an example component.

<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>

</div>

</template>

import vue2Dropzone from 'vue2-dropzone'

import 'vue2-dropzone/dist/vue2Dropzone.min.css'

export default {

components: {

vueDropzone: vue2Dropzone

data: function () {

return {

dropzoneOptions: {

url: '/store-multiple-image',

headers: {

"X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content

}

mounted() {

console.log('Component mounted.')

}

</script>

Now open resources/assets/js/app.js and include the MultipleImageUploadComponent.vue component as follow

require('./bootstrap');
  
window.Vue = require('vue');
  
Vue.component('multiple-image-component', require('./components/MultipleImageUploadComponent.vue'));
  
const app = new Vue({
    el: '#app'
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('multiple-image-component', require('./components/MultipleImageUploadComponent.vue'));

const app = new Vue({

el: '#app'

});

require('./bootstrap');
  
window.Vue = require('vue');
  
Vue.component('multiple-image-component', require('./components/MultipleImageUploadComponent.vue'));
  
const app = new Vue({
    el: '#app'
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('multiple-image-component', require('./components/MultipleImageUploadComponent.vue'));

const app = new Vue({

el: '#app'

});

Step 6: Create Blade Views And Initialize Vue Components

In this step we will create blade view file, go to resources/views/ and open welocome.blade.php. Then put the following code into your welcome.blade.php file as follow:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue JS Multiple Image Upload Using vue-dropzone Example</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <multiple-image-component></multiple-image-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel Vue JS Multiple Image Upload Using vue-dropzone Example</title>

</head>

<body>

<multiple-image-component></multiple-image-component>

</div>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

Laravel 8 Vue JS Flash Message Tutorial

In this Laravel 7 Vue JS Flash Message Example Tutorial I’ll show you how to create Flash Message with Vue Js in laravel. In this tutorial you will learn to add Flash Message with Vue Js in laravel. While working with laravel application we come to situations where we want to show/display various flash success and error messages. In this article I will demonstrate you how to display various type of flash messages or notifications in laravel 8.

Laravel 8 Vue JS Flash Message Tutorial

In this step by step tutorial I will demonstrate you how to display Vue Js flash message in laravel 8. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Create Model And Migration
Step 4: NPM Configuration
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Register Vue App
Step 9: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

The above command will create a model name post.php and also create a migration file for the posts table. Now open create_postss_table.php migration file from database>migrations and put the following code:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->increments('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\PostController;
 
Route::get('post', function () {
    return view('post');
});
Route::post('store', [PostController::class, 'store']);

use App\Http\Controllers\PostController;

Route::get('post', function () {

return view('post');

});

Route::post('store', [PostController::class, 'store']);

Step 6: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Now, go to app\Http\Controllers and open PostController.php file. Then put the following code into your PostController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
Use App\Models\Post;
 
class PostController extends Controller
 
{
    
    public function store(Request $request)
    {
        $insert['title'] = $request->get('title');
        $insert['description'] = $request->get('description');
        $check = Post::insertGetId($insert);
 
        return response()->json($check);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

Use App\Models\Post;

class PostController extends Controller

{

public function store(Request $request)

{

$insert['title'] = $request->get('title');

$insert['description'] = $request->get('description');

$check = Post::insertGetId($insert);

return response()->json($check);

}

Step 7: Create Vue Component

In this step we will create a vue component. Go to resources/assets/js/components folder and create a file called Post.vue. Then put the following code into your Post.vue components file:

<template> 
    <div class="container"> 
        <div class="row justify-content-center"> 
   
            <div class="col-md-8"> 
                <div class="card"> 
                    <div class="card-header"> Laravel Vue js Flash Message Example </div> 
     
                    <div class="card-body"> 
                        <form @submit="formStore"> 
                        <strong> Title:</strong> 
                        <input type="text" class="form-control" v-model="title"> 
                        <strong> Description:</strong> 
                        <textarea class="form-control" v-model="description"> </textarea> 
    
                        <button class="btn btn-success"> Submit</button> 
                        </form> 
                        <strong> Output:</strong> 
                        <pre> 
                        {{output}}
                        </pre> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</template> 
    
<script> 
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
              title: '',
              description: '',
              output: ''
            };
        },
        methods: {
            formStore(e) {
                e.preventDefault();
                let currentObj = this;
                axios.post('/store', {
                    title: this.title,
                    description: this.description
                })
                .then(function (response) {
                    currentObj.output = response.data;
                    flash('Post Created Successfully', 'success');
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script>

<div class="card-header"> Laravel Vue js Flash Message Example </div>

<strong> Title:</strong>

<strong> Description:</strong>

<button class="btn btn-success"> Submit</button>

</form>

<strong> Output:</strong>

<pre>

</pre>

</div>

</template>

export default {

mounted() {

console.log('Component mounted.')

data() {

return {

title: '',

description: '',

output: ''

};

methods: {

formStore(e) {

e.preventDefault();

let currentObj = this;

axios.post('/store', {

title: this.title,

description: this.description

})

.then(function (response) {

currentObj.output = response.data;

flash('Post Created Successfully', 'success');

})

.catch(function (error) {

currentObj.output = error;

});

}

</script>

Now, create a new components named flash.vue and update the following code into flash.vue file:

<template>
    <div class="alert alert-success spacing" role="alert" v-show="show">
        {{ body }}
    </div>
</template>
    
<script>
    export default {
        props: ['message'],
        data() {
            return {
                show : false,
                body : ''
            }
        },
        created() {
            if(this.message) {
                this.flash(this.message)
            }
            window.events.$on('flash',(message) => this.flash(message))
        },
        methods: {
            flash(message) {
                this.show = true
                this.body = message
   
                setTimeout(() => {
                    this.hide()
                },3000)
            },
            hide() {
                this.show = false
            }
        }
    }
</script>
    
<style>
    .spacing {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

</div>

</template>

export default {

props: ['message'],

data() {

return {

show : false,

body : ''

}

created() {

if(this.message) {

this.flash(this.message)

}

window.events.$on('flash',(message) => this.flash(message))

methods: {

flash(message) {

this.show = true

this.body = message

setTimeout(() => {

this.hide()

},3000)

hide() {

this.show = false

}

</script>

<style>

.spacing {

position: fixed;

right: 25px;

bottom: 25px;

}

</style>

Now open resources/assets/js/app.js and include the Post.vue and Flash.vue component as follow:

require('./bootstrap');
   
window.Vue = require('vue');
   
window.events = new Vue();
   
window.flash = function(message) {
    window.events.$emit('flash',message);
}
    
Vue.component('post-component', require('./components/Post.vue'));
Vue.component('flash', require('./components/Flash.vue'));
    
const app = new Vue({
    el: '#app'
});

require('./bootstrap');

window.Vue = require('vue');

window.events = new Vue();

window.flash = function(message) {

window.events.$emit('flash',message);

}

Vue.component('post-component', require('./components/Post.vue'));

Vue.component('flash', require('./components/Flash.vue'));

const app = new Vue({

el: '#app'

});

require('./bootstrap');
   
window.Vue = require('vue');
   
window.events = new Vue();
   
window.flash = function(message) {
    window.events.$emit('flash',message);
}
    
Vue.component('post-component', require('./components/Post.vue'));
Vue.component('flash', require('./components/Flash.vue'));
    
const app = new Vue({
    el: '#app'
});

require('./bootstrap');

window.Vue = require('vue');

window.events = new Vue();

window.flash = function(message) {

window.events.$emit('flash',message);

}

Vue.component('post-component', require('./components/Post.vue'));

Vue.component('flash', require('./components/Flash.vue'));

const app = new Vue({

el: '#app'

});

Step 8: Register Vue App

In this step, you need to create a blade view file to define Vue’s app. Go to resources/views folder and make a file named post.blade.php. Then update the below code into post.blade.php file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 8 Vue Flash Message Example - w3adda.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <flash message=""></flash>
            <post-component></post-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Vue Flash Message Example - w3adda.com</title>

</head>

<body>

<post-component></post-component>

</div>

</body>

</html>

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
 
or 
 
npm run watch

npm run dev

npm run watch

Laravel 8 Vue JS Datatables Tutorial with Example

In this Laravel 8 Vue JS Datatables Example Tutorial I’ll show you how to use Datatables with Vue Js in laravel. In this tutorial you will learn to use datatables with Vue Js in laravel. In this article I will demonstrate the use of Datatables with Vue Js with example in laravel 8.

Laravel 8 Vue JS Datatables Tutorial with Example

In this step by step tutorial I will show you how to implement and use Datatables with Vue Js in laravel 8. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Create Model And Migration
Step 4: NPM Configuration
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Create Blade Views And Initialize Vue Components
Step 9: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -fm

1	php artisan make:model Post -fm

The above command will create a model name post.php and also create a migration file for the posts table. Open create_posts_table.php migration file from database>migrations and replace up() function with following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->string('slug');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Now, go to app/Models/Post.php and put the following code into your Post.php model as follow:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $guarded = [];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

protected $guarded = [];

}

Next, go to database/factories and open PostFactory.php. Then put the following code into it as follow:

/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Models\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence)
    ];
});

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Models\Post;

use Faker\Generator as Faker;

$factory->define(Post::class, function (Faker $faker) {

return [

'title' => $faker->sentence,

'slug' => \Str::slug($faker->sentence)

];

});

Now, execute following command to generate fake records using faker as follow:

php artisan tinker
//and then
factory(\App\Models\Post::class,100)->create()
exit

php artisan tinker

//and then

factory(\App\Models\Post::class,100)->create()

exit

Step 4: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Install vuejs-datatable:

npm install vuejs-datatable

1	npm install vuejs-datatable

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\PostController;
 
Route::get('posts', [PostController::class, 'index']);

use App\Http\Controllers\PostController;

Route::get('posts', [PostController::class, 'index']);

Step 6: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Now, go to app\Http\Controllers and open PostController.php file. Then put the following code into your PostController.php file:

<?php 
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::get();
        return response()->json($posts);
         
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Post;

use Illuminate\Http\Request;

class PostController extends Controller

{

public function index(Request $request)

{

$posts = Post::get();

return response()->json($posts);

}

Step 7: Create Vue Component

In this step we will create a Vue component. Go to resources/assets/js/components folder and create a file called DataTableComponent.vue. Now, update the following code into your DataTableComponent.vue components file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Laravel Vue Datatables Component Example</div>
   
                    <div class="card-body">
                        <datatable :columns="columns" :data="rows"></datatable>
                        <datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>
   
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
   
<script>
   
    import DatatableFactory from 'vuejs-datatable';
   
    export default {
        components: { DatatableFactory },
        mounted() {
            console.log('Component mounted.')
        },
        data(){
            return {
                columns: [
                        {label: 'id', field: 'id'}, 
                        {label: 'Title', field: 'title'},
                        {label: 'Slug', field: 'slug'}
                    ],
                rows: [],
                page: 1,
                per_page: 10,
            }
        },
        methods:{
            getPosts: function() {
                axios.get('/posts').then(function(response){
                    this.rows = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getPosts()
        }
    }
</script>

<div class="card-header">Laravel Vue Datatables Component Example</div>

<datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>

</div>

</template>

import DatatableFactory from 'vuejs-datatable';

export default {

components: { DatatableFactory },

mounted() {

console.log('Component mounted.')

data(){

return {

columns: [

{label: 'id', field: 'id'},

{label: 'Title', field: 'title'},

{label: 'Slug', field: 'slug'}

rows: [],

page: 1,

per_page: 10,

}

methods:{

getPosts: function() {

axios.get('/posts').then(function(response){

this.rows = response.data;

}.bind(this));

}

created: function(){

this.getPosts()

}

</script>

Now open resources/assets/js/app.js and include the DataTableComponent.vue component as follow:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('datatable-component', require('./components/DataTableComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('datatable-component', require('./components/DataTableComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 8: Create Blade Views And Initialize Vue Components

In this step we will create blade view files. Go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Now, go to resources/views/layouts and open app.blade.php file. Then put the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 8 Vue JS DataTable Example Tutorial</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @stack('fontawesome')
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel 8 Vue JS DataTable Example Tutorial</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, go to resources/views/ and open welocome.blade.php. Then put the following code into your welcome.blade.php file as follow:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue Js DataTable Example</div>
                     
                <div class="card-body">
                  <datatable-component></datatable-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue Js DataTable Example</div>

<datatable-component></datatable-component>

</div>

@endsection

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

Laravel 8 Vue JS Axios Get Request Tutorial Example

In this Laravel 8 Vue JS Axios Get Request Example tutorial, I’ll show you how to implement get request with Vue JS Axios in laravel. In this tutorial you will learn to create get request with Vue JS Axios in laravel. In this article I will demonstrate you to create get request with Vue JS Axios in laravel.

Laravel 8 Vue JS Axios Get Request Tutorial Example

In this step by step tutorial we will learn to create get request with Vue JS Axios in laravel. Please follow the instruction given below:

Step 1: Download Laravel Fresh Setup
Step 2: Setup Database Credentials
Step 3: Generate Fake Data
Step 4: Add Routes
Step 5: Create Controller By Command
Step 6: Install Vue Js dependency
Step 7: Create blade file and layout
Step 8: Run Development Server

Step 1: Download Laravel Fresh Setup

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Generate Fake data

Now, in this step we will generate some dummy data.

php artisan migrate

1	php artisan migrate

Now, use the following artisan command to generate dummy data:

php artisan tinker
// then
factory(\App\User::class,10)->create()

php artisan tinker

// then

factory(\App\User::class,10)->create()

Step 4: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\UserController;
 
Route::get('users', [UserController::class, 'index']);
Route::get('list', [UserController::class, 'list']);

use App\Http\Controllers\UserController;

Route::get('users', [UserController::class, 'index']);

Route::get('list', [UserController::class, 'list']);

Step 5: Create Controller By Command

Now, lets create a controller named UserController using command given below –

php artisan make:controller UserController

1	php artisan make:controller UserController

Now, open app/Https/Controller/UserController.php and put the following methods into your UserController file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
 
class UserController extends Controller
{
     
    public function index()
    {
        return view('users')
         
    }
    public function list()
    {
        return response()->json([
            'users' => \App\Models\User::latest()->get()
        ], Response::HTTP_OK);
         
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller

{

public function index()

{

return view('users')

}

public function list()

{

return response()->json([

'users' => \App\Models\User::latest()->get()

], Response::HTTP_OK);

}

Step 6: Install Vue Js dependency

In this step we will install required dependencies using following command:

npm install

1	npm install

Go to resources/assets/js/components/ folder. And create a new components name UserComponent.vue. Then put the following code into your UserComponent.vue file:

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">User List</div>
                 
                <div class="card-body">
                <table>
                    <tr>
                        <th width="50%">Name</th>
                        <th width="50%">Email</th>
                    </tr>
                    <tr v-for="user in users" :key="user.id">
                        <td>{{ user.name }}</td>
                        <td>{{ user.email }}</td>
                    </tr>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
    export default {
        data() {
            return {
              users: {},
            }
        },
        methods: {
            getUser(){
                axios.get('/list')
                     .then((response)=>{
                       this.users = response.data.users
                     })
            }
        },
        created() {
            this.getUser()
        }
    }
</script>

<table>

<tr>

<th width="50%">Email</th>

</tr>

<td>{{ user.email }}</td>

</tr>

</table>

</div>

</template>

export default {

data() {

return {

users: {},

}

methods: {

getUser(){

axios.get('/list')

.then((response)=>{

this.users = response.data.users

})

}

created() {

this.getUser()

}

</script>

Go to resources/assets/js then open app.js file and intialize vue js components in this file. So open app.js file and update the following code into your app.js file:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('user-component', require('./components/UserComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('user-component', require('./components/UserComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 7: Create blade file and layout

Now, Open resources/layouts/app.blade.php and update the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <title>Send form data with vue js in laravel</title>
</head>
<body>
     
    <div id="app">
    <div class="py-4">
        @yield('content')
    </div>
     
    </div>
    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

<title>Send form data with vue js in laravel</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

Next, resources/views/ and create a new blade view file name users.blade.php. And put the following code into your users.blade.php view file:

@extends('layouts.app')
@section('content')
 <div class="card-body">        
                
   <user-component></user-component>
                  
 </div>           
@endsection

@extends('layouts.app')

@section('content')

<user-component></user-component>

</div>

@endsection

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev 
//or
npm run watch

npm run dev

//or

npm run watch

Now, open the following URL in browser to see the output –

http://localhost:8000/users

1	http://localhost:8000/users

Laravel 8 Vue JS Post Axios Request Tutorial

In this Laravel 8 Vue JS Post Axios Request Example tutorial, I’ll show you how to implement Post request with Vue JS Axios in laravel. In this tutorial you will learn to create Post request with Vue JS Post Axios in laravel. In this article I will demonstrate you to create Post request with Vue JS Post Axios in laravel.

Laravel 8 Vue JS Post Axios Request Tutorial

In this step by step tutorial we will learn to create post request with Vue JS post Axios in laravel. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Create Migration Files
Step 4: Create Models
Step 5: NPM Configuration
Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component
Step 9: Initialize Vue Components
Step 10: Run Development Server

Step 1: Install Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Migration Files

Now, in this step we will create migration file. Please run the following command:

php artisan make:migration create_countries_states_table

1	php artisan make:migration create_countries_states_table

Now open create_countries_states_table.php migration file from database>migrations and replace up() function with the following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCountriesStatesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->timestamps();
        });
        Schema::create('states', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('country_id');
            $table->string('name');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('countries');
        Schema::dropIfExists('states');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateCountriesStatesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->timestamps();

});

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

$table->bigIncrements('id');

$table->integer('country_id');

$table->string('name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('countries');

Schema::dropIfExists('states');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: Create Models

Now, in this step we will create model file. Please run the following command:

php artisan make:model Country
php artisan make:model State

1 2	php artisan make:model Country php artisan make:model State

Step 5: NPM Configuration

Install all Vue dependencies:

npm install

1	npm install

To calling Laravel API routes. You need to install vue-axios. So use run the following command on command prompt:

npm install vue-axios --save

1	npm install vue-axios --save

After installing all dependencies run this command:

npm run watch

1	npm run watch

Step 6: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\CountryStateController;
 
Route::get('get_countries', [CountryStateController::class, 'getCountries']);
Route::post('get_states', [CountryStateController::class, 'getStates']);

use App\Http\Controllers\CountryStateController;

Route::get('get_countries', [CountryStateController::class, 'getCountries']);

Route::post('get_states', [CountryStateController::class, 'getStates']);

Step 7: Create Controller By Command

Now, lets create a controller named CountryStateController using command given below –

php artisan make:controller CountryStateController

1	php artisan make:controller CountryStateController

Now, go to app\Http\Controllers and open CountryStateController.php file. Then put the following code into your CountryStateController.php file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Country;
use App\Models\State;
class CountryStateController extends Controller
{
    /**
     * Retrieve countries data
     *
     * @return void
     */
    public function getCountries()
    {
        $data = Country::get();
        return response()->json($data);
    }
    /**
     * Retrieve states data
     *
     */
    public function getStates(Request $request)
    {
        $data = State::where('country_id', $request->country_id)->get();
        return response()->json($data);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Country;

use App\Models\State;

class CountryStateController extends Controller

{

/**

* Retrieve countries data

* @return void

public function getCountries()

{

$data = Country::get();

return response()->json($data);

}

/**

* Retrieve states data

public function getStates(Request $request)

{

$data = State::where('country_id', $request->country_id)->get();

return response()->json($data);

}

Step 8: Create Vue Component

In this step we will create a vue component, go to resources/assets/js/components folder and create a filed called DropdownComponent.vue. And put the following code into your DropdownComponent.vue. components file:

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Laravel 8 vue.js Dependent Dropdown Example</span>
        </div>
        <div class="row justify-content-center" style="margin: 20px 0px 20px 0px;">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label>Select Country:</label>
                            <select class='form-control' v-model='country' @change='getStates()'>
                                <option value='0' >Select Country</option>
                                <option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Select State:</label>
                            <select class='form-control' v-model='state'>
                                <option value='0' >Select State</option>
                                <option v-for='data in states' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                country: 0,
                countries: [],
                state: 0,
                states: []
            }
        },
        methods:{
            getCountries: function(){
                axios.get('/get_countries')
                    .then(function (response) {
                        this.countries = response.data;
                    }.bind(this));
            },
            getStates: function() {
                axios.get('/get_states',{
                    params: {
                        country_id: this.country
                    }
                }).then(function(response){
                    this.states = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getCountries()
        }
    }
</script>

<span class="text-secondary">Laravel 8 vue.js Dependent Dropdown Example</span>

</div>

<label>Select Country:</label>

<option value='0' >Select Country</option>

</select>

</div>

<label>Select State:</label>

<option value='0' >Select State</option>

</select>

</div>

</template>

export default {

data(){

return {

country: 0,

countries: [],

state: 0,

states: []

}

methods:{

getCountries: function(){

axios.get('/get_countries')

.then(function (response) {

this.countries = response.data;

}.bind(this));

getStates: function() {

axios.get('/get_states',{

params: {

country_id: this.country

}

}).then(function(response){

this.states = response.data;

}.bind(this));

}

created: function(){

this.getCountries()

}

</script>

Now open resources/assets/js/app.js and include the FileUpload.vue component like this:app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('dropdown-component', require('./components/DropdownComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('dropdown-component', require('./components/DropdownComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 9: Initialize Vue Components

In this step, go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file. Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}"/>
    <title>How to make dependent dropdown with Vue. js and Laravel
</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <dropdown-component></dropdown-component>
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

<!doctype html>

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

<head>

<title>How to make dependent dropdown with Vue. js and Laravel

</title>

</head>

<body>

<dropdown-component></dropdown-component>

</div>

</body>

</html>

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev 
//or
npm run watch

npm run dev

//or

npm run watch

Laravel 8 Vue JS Infinite Scroll Load More Tutorial

In this Laravel 8 Vue JS Infinite Scroll Load More tutorial I’ll show you how to implement Infinite scroll pagination or dynamix ajax load more pagination in laravel with Vue Js. In this tutorial you will learn to implement Infinite scroll pagination or dynamic load more pagination in laravel with Vue Js . In this step by step guide I’ll share example of Vue JS Infinite Scroll Load More pagination in laravel 8.

Laravel 8 Vue JS Infinite Scroll Load More Tutorial

In this step by step tutorial I will demonstrate to create infinite scroll or load more pagination on page scroll with vue js and laravel 8 applicatons:

Step 1: Download Laravel Fresh Setup
Step 2: Setup Database Credentials
Step 3: Create Migration and Model File
Step 4: Generate Dummy Data
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Configuration Vue JS
Step 8: Update app.js And Default Components
Step 9: Add Vue Components on welcome.blade.php file
Step 10: Start Development Server

Step 1: Download Laravel Fresh Setup

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Migration and Model File

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -fm

1	php artisan make:model Post -fm

The above command will create post model, migration, and factory file into your project. Go to app/database/migrations and find posts migration file. Then open it and put the following code into posts migration file:

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->string('slug');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: Generate Dummy Data

Next step, generate fake or dummy data for posts table. So go to database/factories folder and find PostFactory.php file. After that, open and update the following code in PostFactory.php file as follow:

/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Models\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
    return [
        'title' => $faker->word,
        'slug' => strtolower($faker->word)
    ];
});

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Models\Post;

use Faker\Generator as Faker;

$factory->define(Post::class, function (Faker $faker) {

return [

'title' => $faker->word,

'slug' => strtolower($faker->word)

];

});

Next open terminal and run following command to generate dummy data for posts table:

php artisan tinker
//then
factory(\App\Post::class,200)->create()

php artisan tinker

//then

factory(\App\Post::class,200)->create()

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\PostController;
 
Route::get('posts', [PostController::class, 'index']);

use App\Http\Controllers\PostController;

Route::get('posts', [PostController::class, 'index']);

Step 6: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

The above command will create PostController inside app/Http/Controllers/ folder. Now, open your PostController and update the following methods into your PostController File:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    public function index()
    {
        $data = \App\Models\Post::orderBy('id')->paginate(10);
        return response()->json($data);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller

{

public function index()

{

$data = \App\Models\Post::orderBy('id')->paginate(10);

return response()->json($data);

}

Step 7: Configuration Vue JS

Now, you need setup Vue js. So open your terminal and execute the following commands one by one:

Install npm:

npm install

1	npm install

Install vue-resource:

npm install vue-resource

1	npm install vue-resource

Install vue-infinite-loading:

npm install vue-infinite-loading

1	npm install vue-infinite-loading

Step 8: Update app.js And Default Components

Go to resources/assets/js/ folder and find the app.js file inside this directory. Then update the following code into your app.js file:

resources/assets/js/app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.use(require('vue-resource'));
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('InfiniteLoading', require('vue-infinite-loading'));
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.use(require('vue-resource'));

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('InfiniteLoading', require('vue-infinite-loading'));

const app = new Vue({

el: '#app',

});

resources/assets/js/components/ExampleComponent.vue

<template>
    <div class="container" style="margin-top:50px;">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"><strong> Laravel Vue JS Infinite Scroll</strong></div>
  
                    <div class="card-body">
                        <div>
                          <p v-for="item in list" :key="item.id">
                            <a v-bind:href="'http://127.0.0.1:8000/post/'+item.slug" target="_blank">{{item.title}}</a>
                          </p>
                          <infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading>
  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
    export default {
        
        data() {
            return {
              list: [],
              page: 1,
            };
          },
          methods: {
            infiniteHandler($state) {
      
                this.$http.get('/posts?page='+this.page)
                    .then(response => {
                        return response.json();
                         
                    }).then(data => {
                        $.each(data.data, (key, value)=> {
                                this.list.push(value);
                        });
                    $state.loaded();
                    });
  
                this.page = this.page + 1;
            },
          },
    }
</script>

<div class="card-header"><strong> Laravel Vue JS Infinite Scroll</strong></div>

<div>

<a v-bind:href="'http://127.0.0.1:8000/post/'+item.slug" target="_blank">{{item.title}}</a>

</p>

<infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading>

</div>

</template>

export default {

data() {

return {

list: [],

page: 1,

};

methods: {

infiniteHandler($state) {

this.$http.get('/posts?page='+this.page)

.then(response => {

return response.json();

}).then(data => {

$.each(data.data, (key, value)=> {

this.list.push(value);

});

$state.loaded();

});

this.page = this.page + 1;

}

</script>

Step 9: Add Vue Components on welcome.blade.php file

Go to resources/views and find welcome.blade.php file inside this folder. Then update the following code into your welcome.blade.php file:

@extends('layouts.app')
@section('content')
  <example-component></example-component>
@endsection

@extends('layouts.app')

@section('content')

<example-component></example-component>

@endsection

And also update the following code into app.blade.php file, which is located on resources/views/layouts/ folder.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     
</head>
<body>
    <div id="app">
      
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
 <script src="{{ asset('js/app.js') }}" defer></script>
</html>

<!doctype html>

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

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Step 10: Start Development Server

npm run watch

1	npm run watch

Laravel 8 FullCalendar Vue JS Tutorial Example

In this Laravel 8 FullCalendar Vue JS Tutorial Example tutorial I’ll show you how to display events on the calendar using vue js fullcalendar components in laravel 8 apps. In this tutorial you will learn to display events on the calendar using vue js fullcalendar in laravel 8. This tutorial you will also learn to show dynamic event data on vue js calendar using Vue full calendar components in laravel vue js.

Laravel 8 FullCalendar Vue JS Tutorial Example

In this step by step tutorial I will demonstrate you how to display events on the calendar using vue js fullcalendar components in laravel 8 applications. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Create Model And Migration
Step 4: NPM Module Configuration For Vue Js
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Create Blade Views And Initialize Vue Components
Step 9: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Event -m

1	php artisan make:model Event -m

The above command will create a model name Event.php and also create a migration file for the events table. Lets open create_events_table.php migration file from database>migrations and replace up() function with following code:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('events', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->date('start');
            $table->date('end');
            $table->timestamps();
      });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateEventsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->date('start');

$table->date('end');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('events');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Next, Navigate to app/Models/Event.php and update the following code into your Event.php model as follow:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Event extends Model
{
    use HasFactory;
 
    protected $fillable = [
 
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Event extends Model

{

use HasFactory;

protected $fillable = [

];

}

Step 4: NPM Module Configuration For Vue Js

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

After that, install vue full calendar dependencies by using the below command:

npm install --save vue-full-calendar
 
 
npm install --save babel-runtime
 
 
npm install babel-preset-stage-2 --save-dev
 
 
npm install moment --save

npm install --save vue-full-calendar

npm install --save babel-runtime

npm install babel-preset-stage-2 --save-dev

npm install moment --save

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\EventController;
 
Route::get('events', [EventController::class, 'index']);

use App\Http\Controllers\EventController;

Route::get('events', [EventController::class, 'index']);

Step 6: Create Controller By Command

Now, lets create a controller named EventController using command given below –

php artisan make:controller EventController

1	php artisan make:controller EventController

Go to app\Http\Controllers and open EventController.php file. Then put the following code into your EventController.php file:

namespace App\Http\Controllers;
 
use App\Models\Event;
use Illuminate\Http\Request;
 
class EventController extends Controller
{
    public function index(Request $request)
    {
        $events = Event::get(['title','start']);
        return response()->json(["events" => $events]);
    }
 
}

namespace App\Http\Controllers;

use App\Models\Event;

use Illuminate\Http\Request;

class EventController extends Controller

{

public function index(Request $request)

{

$events = Event::get(['title','start']);

return response()->json(["events" => $events]);

}

Step 7: Create Vue Component

In this step we will create a Vue component. Go to resources/assets/js/components folder and create a file called FullCalendarComponent.vue. Now, put the following code into your FullCalendarComponent.vue components file:

<template>
<div class="container">
       <full-calendar :event-sources="eventSources"></full-calendar>
       </div>
</template>
<script>
    export default{
  data() {
    return {
      eventSources: [
        {
          events(start, end, timezone, callback) {
            axios.get('http://localhost:8000/events').then(response => {
              callback(response.data.events)
            })
          },
          color: 'yellow',
          textColor: 'black',
        }
      ]
    }
  }
    }
</script>

<full-calendar :event-sources="eventSources"></full-calendar>

</div>

</template>

export default{

data() {

return {

eventSources: [

{

events(start, end, timezone, callback) {

axios.get('http://localhost:8000/events').then(response => {

callback(response.data.events)

})

color: 'yellow',

textColor: 'black',

}

]

}

</script>

Now open resources/assets/js/app.js and include the FullCalendarComponent.vue component as follow:

require('./bootstrap');
 
import 'fullcalendar/dist/fullcalendar.css';
 
window.Vue = require('vue');
 
import FullCalendar from 'vue-full-calendar'; //Import Full-calendar
 
Vue.use(FullCalendar);
 
 
Vue.component('fullcalendar-component', require('./components/FullCalendarComponent.vue').default);
 
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

import 'fullcalendar/dist/fullcalendar.css';

window.Vue = require('vue');

import FullCalendar from 'vue-full-calendar'; //Import Full-calendar

Vue.use(FullCalendar);

Vue.component('fullcalendar-component', require('./components/FullCalendarComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 8: Create Blade Views And Initialize Vue Components

In this step we will create a blade view file. Go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file. Now go to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <title>Laravel Vue JS FullCalendar Example</title>
 
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
    @stack('fontawesome')
 
</head>
<body>
    <div id="app">
 
        <main class="py-4">
            @yield('content')
        </main>
 
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel Vue JS FullCalendar Example</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Now, go to resources/views/ and open welocome.blade.php. Then update the following code into your welcome.blade.php file as follow:

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue JS FullCalendar Example</div>
                     
                <div class="card-body">
                  <fullcalendar-component></fullcalendar-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue JS FullCalendar Example</div>

<fullcalendar-component></fullcalendar-component>

</div>

@endsection

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
 
or 
 
npm run watch

npm run dev

npm run watch

Laravel 8 Vue JS Owl Carousel Slider

In this Laravel 8 Vue JS Owl Carousel Slider Example tutorial, I’ll show you how to implement Owl carousel slider with Vue Js in laravel 8. In this tutorial you will learn to create Owl carousel slider with Vue Js in laravel 8. With Owl carousel you can create image slider in laravel project.

Laravel 8 Vue JS Owl Carousel Slider

In this step by step tutorial I will demonstrate you how to implement Owl carousel slider with Vue Js in laravel 8. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Create Model And Migration
Step 4: NPM Module Configuration For Vue Js
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Create Blade Views And Initialize Vue Components
Step 9: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Slider -m

1	php artisan make:model Slider -m

The above command will create a model name slider.php and also create a migration file for the sliders table. Lets open create_sliders_table.php migration file from database>migrations and replace up() function with following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSlidersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('sliders', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('path');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('sliders');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateSlidersTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->string('path');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('sliders');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Now, go to app/Models/Slider.php and update the following code into your Slider.php model as follow:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Slider extends Model
{
    use HasFactory;
 
    protected $guarded = [];
 
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Slider extends Model

{

use HasFactory;

protected $guarded = [];

}

Step 4: NPM Module Configuration For Vue Js

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

After that, install owl carousel dependencies by using the below command:

npm i -s vue-owl-carousel

1	npm i -s vue-owl-carousel

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\SliderController;
 
Route::get('slider', [SliderController::class, 'index']);

use App\Http\Controllers\SliderController;

Route::get('slider', [SliderController::class, 'index']);

Step 6: Create Controller By Command

Now, lets create a controller named SliderController using command given below –

php artisan make:controller SliderController

1	php artisan make:controller SliderController

Now, go to app\Http\Controllers and open SliderController.php file. Then put the following code into your SliderController.php file:

<?php 
 
namespace App\Http\Controllers;
 
use App\Models\Slider;
 
use Illuminate\Http\Request;
 
class SliderController extends Controller
{
    public function index(Request $request)
    {
        $sliderImg = Slider::get();
        return response()->json($sliderImg);
         
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Slider;

use Illuminate\Http\Request;

class SliderController extends Controller

{

public function index(Request $request)

{

$sliderImg = Slider::get();

return response()->json($sliderImg);

}

Step 7: Create Vue Component

In this step we will create a Vue component. Now, go to resources/assets/js/components folder and create a file called SliderComponent.vue. Now, put the following code into your SliderComponent.vue components file:

<template>
    <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
               <carousel>
                <img class="img-fluid" v-for="(img, index) in images" :src="img.path" :key="index">
               </carousel>
          </div>
        </div>
    </div>
</template>
<script>
import carousel from "vue-owl-carousel";
export default {
  components: {
    carousel
  },
  name: "Owl Carousel",
  props: {
    msg: String
  },
  data() {
      return {
          images: []
      }
  },
  created() {
      this.axios
          .get('http://localhost:8000/slider')
          .then(response => {
              this.images = response.data;
          });
  }
};
</script>

</carousel>

</div>

</template>

import carousel from "vue-owl-carousel";

export default {

components: {

carousel

props: {

msg: String

data() {

return {

images: []

}

created() {

this.axios

.get('http://localhost:8000/slider')

.then(response => {

this.images = response.data;

});

}

};

</script>

Now open resources/assets/js/app.js and include the SliderComponent.vue component as follow:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('slider-component', require('./components/SliderComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('slider-component', require('./components/SliderComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 8: Create Blade Views And Initialize Vue Components

In this step we will create a blade file. Go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, go to resources/views/layouts and open app.blade.php file. Then put the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 8 Vue JS Owl Carousel Slider Example</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @stack('fontawesome')
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel 8 Vue JS Owl Carousel Slider Example</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Now, go to resources/views/ and open welocome.blade.php. Then put the following code into your welcome.blade.php file as follow:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue JS Owl Carousel Slider Example</div>
                     
                <div class="card-body">
                  <slider-component></slider-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue JS Owl Carousel Slider Example</div>

<slider-component></slider-component>

</div>

@endsection

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

Laravel 8 Vue JS Live Search Tutorial

In this Laravel 8 Vue JS Live Search Tutorial I will show you how to create a live search box in laravel Vue Js application. In this tutorial you will learn to create live search input box in laravel vue js application. In this article I will share example to create a dynamic ajax driven live search in Laravel with Vue Js. In this tutorial we will create a dynamic live search autocomplete which will fetch options from database table In Vue Js laravel application .

Laravel 8 Vue JS Live Search Tutorial

In this step by step tutorial I will demonstrate you to create a live search box in laravel Vue Js application. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Run Make auth Command
Step 4: Create Model And Migration
Step 5: NPM Configuration
Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component
Step 9: Create Blade Views And Initialize Vue Components
Step 10: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Make auth Command

In this step we will run following commands to install laravel/ui and implement auth system:

cd blog
composer require laravel/ui --dev
php artisan ui vue --auth

cd blog

composer require laravel/ui --dev

php artisan ui vue --auth

This laravel laravel/ui package builds scaffold all of the routes, controller and views for authentication.

Step 4: Create Model And Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -fm

1	php artisan make:model Post -fm

The above command will create a model name post.php and also create a migration file for the posts table. Now open create_posts_table.php migration file from database>migrations and replace up() function with following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->unsignedBigInteger('user_id');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->string('slug');

$table->unsignedBigInteger('user_id');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Now, go to app/Models/Post.php and put the following code into your Post.php model as follow:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $guarded = [];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

protected $guarded = [];

}

Now, go to database/factories and open PostFactory.php. Then update the following code into it as follow:

<?php
 
use Faker\Generator as Faker;
 
use App\Models\Post;
 
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1
    ];
});

<?php

use Faker\Generator as Faker;

use App\Models\Post;

$factory->define(Post::class, function (Faker $faker) {

return [

'title' => $faker->sentence,

'slug' => \Str::slug($faker->sentence),

'user_id' => 1

];

});

Now we will run following command to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Models\Post::class,30)->create()

php artisan tinker

//and then

factory(\App\Models\Post::class,30)->create()

Step 5: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Step 6: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\PostController;
 
Route::get('search', [PostController::class, 'index']);
 
Route::get('res-search', [PostController::class, 'search']);

use App\Http\Controllers\PostController;

Route::get('search', [PostController::class, 'index']);

Route::get('res-search', [PostController::class, 'search']);

Step 7: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Now, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Facades\App\Repository\Posts;
class PostController extends Controller
{
    public function index()
    {   
        return view('search');
    }
    public function search(Request $request)
    {
        $posts=Post::where('title',$request->keywords)->get();
        return response()->json($posts);
         
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Post;

use Illuminate\Http\Request;

use Facades\App\Repository\Posts;

class PostController extends Controller

{

public function index()

{

return view('search');

}

public function search(Request $request)

{

$posts=Post::where('title',$request->keywords)->get();

return response()->json($posts);

}

Step 8: Create Vue Component

In this step we will create a Vue component. Go to resources/assets/js/components folder and create a file called SearchComponent.vue. Now, put the following code into your SearchComponent.vue components file:

<template>
    <div>
        <input type="text" v-model="keywords">
        <ul v-if="results.length > 0">
            <li v-for="result in results" :key="result.id" v-text="result.name"></li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            keywords: null,
            results: []
        };
    },
    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },
    methods: {
        fetch() {
            axios.get('/res-search', { params: { keywords: this.keywords } })
                .then(response => this.results = response.data)
                .catch(error => {});
        }
    }
}
</script>

<div>

</ul>

</div>

</template>

export default {

data() {

return {

keywords: null,

results: []

};

watch: {

keywords(after, before) {

this.fetch();

}

methods: {

fetch() {

axios.get('/res-search', { params: { keywords: this.keywords } })

.then(response => this.results = response.data)

.catch(error => {});

}

</script>

Now open resources/assets/js/app.js and include the SearchComponent.vue component as follow:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('search-component', require('./components/SearchComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('search-component', require('./components/SearchComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 9: Create Blade Views And Initialize Vue Components

In this step we will create blade files. Go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, go to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 8 Vue JS Live Search Example Tutorial</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @stack('fontawesome')
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel 8 Vue JS Live Search Example Tutorial</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, go to resources/views/ and create one file name search.blade.php. Then put the following code into your search.blade.php file as follow:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue Js Live Search</div>
                     
                <div class="card-body">
                  <search-component></search-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue Js Live Search</div>

<search-component></search-component>

</div>

@endsection

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

Laravel 8 Vue JS CRUD Tutorial

In this Laravel 8 Vue JS CRUD Example Tutorial, I’ll show you how to create simple crud application using Vue Js in laravel. In this tutorial you will learn to create basic crud application with Vue Js in laravel 8. In this step by step tutorial I’ll demonstrate the implementation of simple crud application using Vue Js in laravel 8.

Laravel 8 Vue JS CRUD Tutorial

In this step by step guide, we will be creating a simple crud operation application with validation in laravel 8. In this example you will learn how to insert, read, update and delete data from database in laravel 8.

Install 8 Laravel 8 App
Connecting App to Database
Install NPM Dependencies
Create Migration, Model and Controller
Define Routes In web.php
Create Vue Js App
Create Vue Js Components For Crud App
Define Vue Js Routes For Crud App
Include Vue Js Dependencies to app.js
Run Development Server

Step 1: Install 8 Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Install NPM Dependencies

Now, you need to setup Vue Js In Laravel 8 and install Vue Js dependencies using NPM. So execute the following command on command prompt.

npm install

1	npm install

Now, install vue-router and vue-axios. vue-axios will be used for calling Laravel API. execute the following command on your command prompt:

npm install vue-router vue-axios --save

1	npm install vue-router vue-axios --save

After installing all dependencies execute this command on terminal:

npm run watch

1	npm run watch

Step 4: Create Migration, Model and Controller

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

Now open create_posts_table.php migration file from database>migrations and replace up() function with this:create_posts_table.php

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Now, Open Post.php model file, which is placed inside app/models directory and update the code into Post.php model:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'title', 'description'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

protected $fillable = [

'title', 'description'

];

}

Now run following command to create PostController.php file:

php artisan make:controller API\PostController

1	php artisan make:controller API\PostController

Next open PostController and define index, add, edit, delete methods in PostController file. So Go to app>Http>Controllers>API folder and open PostController.php file. Then update the following method into this:

<?php
 
namespace App\Http\Controllers\API;
 
use App\Http\Controllers\Controller;
 
use App\Models\Post;
 
use Illuminate\Http\Request;
 
use Validator;
 
class PostController extends Controller
{
    // all posts
    public function index()
    {
        $posts = Post::all()->toArray();
        return array_reverse($posts);
    }
 
    // add post
    public function add(Request $request)
    {
        $post = new Post([
            'title' => $request->input('title'),
            'description' => $request->input('description')
        ]);
        $post->save();
 
        return response()->json('The post successfully added');
    }
 
    // edit post
    public function edit($id)
    {
        $post = Post::find($id);
        return response()->json($post);
    }
 
    // update post
    public function update($id, Request $request)
    {
        $post = Post::find($id);
        $post->update($request->all());
 
        return response()->json('The post successfully updated');
    }
 
    // delete post
    public function delete($id)
    {
        $post = Post::find($id);
        $post->delete();
 
        return response()->json('The post successfully deleted');
    }
}

<?php

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;

use App\Models\Post;

use Illuminate\Http\Request;

use Validator;

class PostController extends Controller

{

// all posts

public function index()

{

$posts = Post::all()->toArray();

return array_reverse($posts);

}

// add post

public function add(Request $request)

{

$post = new Post([

'title' => $request->input('title'),

'description' => $request->input('description')

]);

$post->save();

return response()->json('The post successfully added');

}

// edit post

public function edit($id)

{

$post = Post::find($id);

return response()->json($post);

}

// update post

public function update($id, Request $request)

{

$post = Post::find($id);

$post->update($request->all());

return response()->json('The post successfully updated');

}

// delete post

public function delete($id)

{

$post = Post::find($id);

$post->delete();

return response()->json('The post successfully deleted');

}

Step 5: Define Routes in Web.php

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php
 
Route::get('{any}', function () {
    return view('layouts.app');
})->where('any', '.*');

<?php

Route::get('{any}', function () {

return view('layouts.app');

})->where('any', '.*');

After this, we need to define routes in “routes/api.php” file. Lets open “routes/api.php” file and add the following routes in it.

routes/api.php

Route::get('posts', 'PostController@index');
Route::group(['prefix' => 'post'], function () {
    Route::post('add', 'PostController@add');
    Route::get('edit/{id}', 'PostController@edit');
    Route::post('update/{id}', 'PostController@update');
    Route::delete('delete/{id}', 'PostController@delete');
});

Route::get('posts', 'PostController@index');

Route::group(['prefix' => 'post'], function () {

Route::post('add', 'PostController@add');

Route::get('edit/{id}', 'PostController@edit');

Route::post('update/{id}', 'PostController@update');

Route::delete('delete/{id}', 'PostController@delete');

});

Step 6: Create Vue Js App

In this step we will create Vue Js app, go to resources/views and create one folder named layouts. Inside this folder create a blade view file named app.blade.php file.

Now, go to resources/views/layouts and open app.blade.php file. Then put the following code into your app.blade.php file as follow:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}"/>
    <title>Laravel 8 Vue JS CRUD Example</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
    <style>
        .bg-light {
            background-color: #eae9e9 !important;
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

<!doctype html>

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

<head>

<title>Laravel 8 Vue JS CRUD Example</title>

<style>

.bg-light {

background-color: #eae9e9 !important;

}

</style>

</head>

<body>

</div>

</body>

</html>

Step 7: Create Vue Js Components For Crud App

In this step, go to resources>js folder and create the following vue js component files:

App.vue
AllPosts.vue
AddPost.vue
EditPost.vue

App.vue

AllPosts.vue

AddPost.vue

EditPost.vue

Here, App.vue would be the main Vue file. Lets define router- view in the file. Now all route pages will be displayed on the App.vue file. Go to App.vue file and put the following code into your file:

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Laravel Vue CRUD Example</span>
        </div>
 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Home</router-link>
                    <router-link to="/add" class="nav-item nav-link">Add Post</router-link>
                </div>
            </div>
        </nav>
        <br/>
        <router-view></router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

<span class="text-secondary">Laravel Vue CRUD Example</span>

</div>

<router-link to="/" class="nav-item nav-link">Home</router-link>

<router-link to="/add" class="nav-item nav-link">Add Post</router-link>

</div>

</nav>

<br/>

<router-view></router-view>

</div>

</template>

export default {}

</script>

Next, Open AllPosts.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">All Posts</h3><br/>
 
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="post in posts" :key="post.id">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td>{{ post.description }}</td>
                <td>{{ post.created_at }}</td>
                <td>{{ post.updated_at }}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit
                        </router-link>
                        <button class="btn btn-danger" @click="deletePost(post.id)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                posts: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/posts')
                .then(response => {
                    this.posts = response.data;
                });
        },
        methods: {
            deletePost(id) {
                this.axios
                    .delete(`http://localhost:8000/api/post/delete/${id}`)
                    .then(response => {
                        let i = this.posts.map(item => item.id).indexOf(id); // find index of your object
                        this.posts.splice(i, 1)
                    });
            }
        }
    }
</script>

<div>

<h3 class="text-center">All Posts</h3><br/>

<thead>

<tr>

<th>Title</th>

<th>Description</th>

<th>Created At</th>

<th>Updated At</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

<td>{{ post.title }}</td>

<td>{{ post.description }}</td>

<td>{{ post.created_at }}</td>

<td>{{ post.updated_at }}</td>

<td>

<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit

</router-link>

<button class="btn btn-danger" @click="deletePost(post.id)">Delete</button>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

data() {

return {

posts: []

}

created() {

this.axios

.get('http://localhost:8000/api/posts')

.then(response => {

this.posts = response.data;

});

methods: {

deletePost(id) {

this.axios

.delete(`http://localhost:8000/api/post/delete/${id}`)

.then(response => {

let i = this.posts.map(item => item.id).indexOf(id); // find index of your object

this.posts.splice(i, 1)

});

}

</script>

Next, Open AddPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">Add Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="addPost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Add Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        methods: {
            addPost() {
 
                this.axios
                    .post('http://localhost:8000/api/post/add', this.post)
                    .then(response => (
                        this.$router.push({name: 'home'})
                        // console.log(response.data)
                    ))
                    .catch(error => console.log(error))
                    .finally(() => this.loading = false)
            }
        }
    }
</script>

<div>

<label>Title</label>

</div>

<label>Description</label>

</div>

</form>

</div>

</template>

export default {

data() {

return {

post: {}

}

methods: {

addPost() {

this.axios

.post('http://localhost:8000/api/post/add', this.post)

.then(response => (

this.$router.push({name: 'home'})

// console.log(response.data)

))

.catch(error => console.log(error))

.finally(() => this.loading = false)

}

</script>

Next, Open EditPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">Edit Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="updatePost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Update Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        created() {
            this.axios
                .get(`http://localhost:8000/api/post/edit/${this.$route.params.id}`)
                .then((response) => {
                    this.post = response.data;
                    // console.log(response.data);
                });
        },
        methods: {
            updatePost() {
                this.axios
                    .post(`http://localhost:8000/api/post/update/${this.$route.params.id}`, this.post)
                    .then((response) => {
                        this.$router.push({name: 'home'});
                    });
            }
        }
    }
</script>

<div>

<label>Title</label>

</div>

<label>Description</label>

</div>

<button type="submit" class="btn btn-primary">Update Post</button>

</form>

</div>

</template>

export default {

data() {

return {

post: {}

}

created() {

this.axios

.get(`http://localhost:8000/api/post/edit/${this.$route.params.id}`)

.then((response) => {

this.post = response.data;

// console.log(response.data);

});

methods: {

updatePost() {

this.axios

.post(`http://localhost:8000/api/post/update/${this.$route.params.id}`, this.post)

.then((response) => {

this.$router.push({name: 'home'});

});

}

</script>

Step 8: Define Vue Js Routes For Crud App

Now, you need to define vue routes. So go to resources>js folder, create a file named routes.js and update the following routes into your routes.js file:

import AllPosts from './components/AllPosts.vue';
import AddPost from './components/AddPost.vue';
import EditPost from './components/EditPost.vue';
 
export const routes = [
    {
        name: 'home',
        path: '/',
        component: AllPosts
    },
    {
        name: 'add',
        path: '/add',
        component: AddPost
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditPost
    }
];

import AllPosts from './components/AllPosts.vue';

import AddPost from './components/AddPost.vue';

import EditPost from './components/EditPost.vue';

export const routes = [

{

path: '/',

component: AllPosts

{

path: '/add',

component: AddPost

{

path: '/edit/:id',

component: EditPost

}

];

Step 9: Include Vue Js Dependencies to app.js

Now, you need to add all routes, vue axios and other dependencies etc. So Go to resources>js folder and open app.js. Then update the following code into your app.js file:

require('./bootstrap');
import Vue from ‘vue/dist/vue’;
window.Vue = require('vue');
 
import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
 
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

require('./bootstrap');

import Vue from ‘vue/dist/vue’;

window.Vue = require('vue');

import App from './App.vue';

import VueRouter from 'vue-router';

import VueAxios from 'vue-axios';

import axios from 'axios';

import {routes} from './routes';

Vue.use(VueRouter);

Vue.use(VueAxios, axios);

const router = new VueRouter({

mode: 'history',

routes: routes

});

const app = new Vue({

el: '#app',

router: router,

render: h => h(App),

});

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run watch

1	npm run watch

Laravel 8 Socialite Login with Github Example Tutorial

In this Laravel 8 Socialite Login with Github Example Tutorial I’ll show you how to integrate Github login in laravel 8 using socialite package. Integrating Github login in Laravel 8 using socialite package is much easier. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application.

In this step by step tutorial, you will learn to integrate Github login with your laravel 8 application. Please follow the steps give below:

Step 1 – Install Laravel 8 App
Step 2 – Configure Database With App
Step 3 – Configure Github App
Step 4 – Install Socialite & Configure
Step 5 – Add Field In Table Using Migration
Step 6 – Install Jetstream Auth
Step 7 – Make Routes
Step 8 – Create Controller By Command
Step 9 – Implement Github Login In Login Page
Step 10 – Start Development Server

Step 1 – Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

1	composer create-project --prefer-dist laravel/laravel LaravelGithubLogin

Step 2 – Configure Database With App

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3 – Configure Github App

In this step we will create github App for github social login. Use the link provided to create twitter app.

https://github.com/settings/developers

1	https://github.com/settings/developers

Here you have to click New Auth APP button to Create your app. After this you need to register a new OAuth application page will open. So fill your app detail and submit it, Finally, you will see dashboard of your created github app. Now, copy your github app details.

Now, add GitHub app details into service.php file. Go to config directory and open service.php file. Then add the client id and secret got from github app into service.php file:

 'github' => [
    'client_id' => 'xxxx',
    'client_secret' => 'xxx',
    'redirect' => 'http://127.0.0.1:8000/callback/github',
  ],

'github' => [

'client_id' => 'xxxx',

'client_secret' => 'xxx',

'redirect' => 'http://127.0.0.1:8000/callback/github',

Step 4 – Install Socialite & Configure

In this step we will Install Socialite Package via Composer using following command:

composer require laravel/socialite

1	composer require laravel/socialite

After Installing ‘socialite’ package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
     // Other service providers…
 Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
// Other aliases…
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

'providers' => [

// Other service providers…

Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' => [

// Other aliases…

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Step 5 – Add Field In Table Using Migration

In this step we will create migration to add some fields using following command:

php artisan make:migration add_social_login_field

1	php artisan make:migration add_social_login_field

After that, open the add_social_login_field.php file, which is found inside database/migration directory and add the following code into it:

<?php
   
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
    
class AddSoicalLoginField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('social_id')->nullable();
            $table->string('social_type')->nullable();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('social_id');
           $table->dropColumn('social_type');
         });
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class AddSoicalLoginField extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::table('users', function ($table) {

$table->string('social_id')->nullable();

$table->string('social_type')->nullable();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::table('users', function ($table) {

$table->dropColumn('social_id');

$table->dropColumn('social_type');

});

}

After successfully add field in database table. Then add fillable property in User.php model, which is found inside app/Models/ directory:

<?php
 
namespace App\Models;
 
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;
 
class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'social_id',
        'social_type'
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
 
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
 
    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];
}

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Laravel\Fortify\TwoFactorAuthenticatable;

use Laravel\Jetstream\HasProfilePhoto;

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable

{

use HasApiTokens;

use HasFactory;

use HasProfilePhoto;

use Notifiable;

use TwoFactorAuthenticatable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name',

'email',

'password',

'social_id',

'social_type'

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password',

'remember_token',

'two_factor_recovery_codes',

'two_factor_secret',

];

/**

* The attributes that should be cast to native types.

* @var array

protected $casts = [

'email_verified_at' => 'datetime',

];

/**

* The accessors to append to the model's array form.

* @var array

protected $appends = [

'profile_photo_url',

];

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Step 6 – Install Jetstream Auth

In this step we will Install Laravel Jetstream Package via Composer using following command:

composer require laravel/jetstream

1	composer require laravel/jetstream

Now, you have to install livewire with jetstream. Use the following command to install livewire with jetstream in laravel application:

php artisan jetstream:install livewire

1	php artisan jetstream:install livewire

Install necessary NPM dependency:

npm install

1	npm install

Start node development server:

npm run dev

1	npm run dev

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 7 – Make Routes

In this step, Go to routes directory and open web.php file. Then add the following routes into web.php file:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\SocialGithubController;
 
 
Route::get('auth/github', [SocialGithubController::class, 'redirectToGithub']);
Route::get('callback/github', [SocialGithubController::class, 'handleCallback']);

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Auth\SocialGithubController;

Route::get('auth/github', [SocialGithubController::class, 'redirectToGithub']);

Route::get('callback/github', [SocialGithubController::class, 'handleCallback']);

Step 8 – Create Controller By Command

In this step, run the following command to create GithubSocialController.php file:

php artisan make:controller SocialGithubController

1	php artisan make:controller SocialGithubController

Now, go to app/http/controllers directory and open SocialGithubController.php file in any text editor. Then put the following code into SocialGithubController.php file:

<?php
   
namespace App\Http\Controllers\Auth;
   
use App\Http\Controllers\Controller;
use Socialite;
use Auth;
use Exception;
use App\Models\User;
   
class SocialGithubController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirectToGithub()
    {
        return Socialite::driver('github')->redirect();
    }
       
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function handleCallback()
    {
        try {
     
            $user = Socialite::driver('github')->user();
      
            $finduser = User::where('social_id', $user->id)->first();
      
            if($finduser){
      
                Auth::login($finduser);
     
                return redirect('/home');
      
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_id'=> $user->id,
                    'social_type'=> 'github',
                    'password' => encrypt('github123456')
                ]);
     
                Auth::login($newUser);
      
                return redirect('/home');
            }
     
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use Socialite;

use Auth;

use Exception;

use App\Models\User;

class SocialGithubController extends Controller

{

/**

* Create a new controller instance.

* @return void

public function redirectToGithub()

{

return Socialite::driver('github')->redirect();

}

/**

* Create a new controller instance.

* @return void

public function handleCallback()

{

try {

$user = Socialite::driver('github')->user();

$finduser = User::where('social_id', $user->id)->first();

if($finduser){

Auth::login($finduser);

return redirect('/home');

}else{

$newUser = User::create([

'name' => $user->name,

'email' => $user->email,

'social_id'=> $user->id,

'social_type'=> 'github',

'password' => encrypt('github123456')

]);

Auth::login($newUser);

return redirect('/home');

}

} catch (Exception $e) {

dd($e->getMessage());

}

In this step, implement github login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>
 
        <x-jet-validation-errors class="mb-4" />
 
        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif
 
        <form method="POST" action="{{ route('login') }}">
            @csrf
 
            <div>
                <x-jet-label value="{{ __('Email') }}" />
                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
            </div>
 
            <div class="mt-4">
                <x-jet-label value="{{ __('Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>
 
            <div class="block mt-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox" name="remember">
                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>
 
            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif
 
                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
 
                <a href="{{ url('auth/github') }}" style="margin-top: 0px !important;background: green;color: #ffffff;padding: 5px;border-radius:7px;" class="ml-2">
                  <strong>Github Login</strong>
                </a> 
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

<x-guest-layout>

<x-jet-authentication-card>

<x-slot name="logo">

<x-jet-authentication-card-logo />

</x-slot>

<x-jet-validation-errors class="mb-4" />

@if (session('status'))

</div>

@endif

@csrf

<div>

<x-jet-label value="{{ __('Email') }}" />

<x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />

</div>

<x-jet-label value="{{ __('Password') }}" />

<x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />

</div>

<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>

</label>

</div>

@if (Route::has('password.request'))

</a>

@endif

<x-jet-button class="ml-4">

</x-jet-button>

<strong>Github Login</strong>

</a>

</div>

</form>

</x-jet-authentication-card>

</x-guest-layout>

Step 10 – Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000

1	http://127.0.0.1:8000