Category Archives: Laravel

Laravel Tutorials

How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA)

In this How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA) Tutorial, I’ll show you how to create single page crud application using Vue Js in laravel. In this tutorial you will learn to create single page crud application using Vue Js in laravel 8. In this article we will be creating a basic single page crud application with vue js in laravel 8 application.

How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA)

In this step by step tutorial I’ll demonstrate with example to create single page crud application using Vue Js in laravel 8. Please follow the instruction given below:

Create a Laravel Project
Enable database connection
Create a model and run migration
Create and configure the controller
Add routes
Install Laravel Vue UI
Install NPM dependencies
Build Vue Js CRUD Components
Test Laravel Vue JS CRUD operations

Install Laravel App

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

composer create-project laravel/laravel laravel-vue-crud --prefer-dist

1	composer create-project laravel/laravel laravel-vue-crud --prefer-dist

Database Connection

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=db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db

DB_USERNAME=root

DB_PASSWORD=

Set Up Model and Run Migration

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

php artisan make:model Product -m

1	php artisan make:model Product -m

Add following code in database/migrations/create_products_table.php:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('detail');            
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('name');

$table->text('detail');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

Define Product table values in app/Models/Product.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
    protected $fillable = [
        'name', 
        'detail'
    ];    
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $fillable = [

'name',

'detail'

];

}

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

Create Datatables in Laravel 8 Vue JS Application

In this Create Datatables in Laravel 8 Vue JS Application Tutorial I’ll show you how to create Datatables in laravel Vue Js application. In this tutorial you will learn to create datatables with Vue Js in laravel. In this article I will give you example on how to use Datatables with Vue Js with example in laravel 8.

Create Datatables in Laravel 8 Vue JS Application

In this step by step tutorial I will demonstrate you with example on how to create Datatables with Vue Js in laravel 8. Please follow the instruction given below:

Create a laravel project
Make database connection
Generate and configure model, Run migration
Create routes
Generate and setting up the controller
Setting up vue UI in laravel
Configure a vue component
Setting up views and vue components
Run application

Install Laravel App

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

composer create-project laravel/laravel laravel-vue-datatables --prefer-dist

1	composer create-project laravel/laravel laravel-vue-datatables --prefer-dist

Database Connection

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=db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db

DB_USERNAME=root

DB_PASSWORD=

Model and Migration

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

php artisan make:model Blog -m

1	php artisan make:model Blog -m

Put the following code in database/migrations/create_blogs_table.php:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('url');
            $table->string('category');
            $table->string('description');                        
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('blogs');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('title');

$table->string('url');

$table->string('category');

$table->string('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('blogs');

}

Now add following code in app/Models/Blog.php file:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    use HasFactory;
    protected $fillable = [
        'title', 
        'url', 
        'category',
        'description'
    ];    
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model

{

use HasFactory;

protected $fillable = [

'title',

'url',

'category',

'description'

];

}

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

How to Create Infinite Scroll Load More in Laravel 8 Vue JS App

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

How to Create Infinite Scroll Load More in Laravel 8 Vue JS App

In this step by step tutorial I will demonstrate to create infinite scroll or load more on page scroll with vue js and laravel 8 applicatons. Please follow the instruction given below:

Create Laravel Project
Add Database Details
Create Model and Run Migration
Generate Dummy Data
Generate and Configure Controller
Create Route
Install Laravel Vue UI
Install Vue Infinite Loading
Set Up Vue JS in Laravel
Test Application

Install Laravel Project

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

composer create-project laravel/laravel laravel-vue-infinte-scroll --prefer-dist

1	composer create-project laravel/laravel laravel-vue-infinte-scroll --prefer-dist

Add Database Details

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=db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db

DB_USERNAME=root

DB_PASSWORD=

Create Model and Run Migration

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

php artisan make:model Product -m

1	php artisan make:model Product -m

Further, open the database/migrations/create_products_table.php file and add the table values within the migration of the product:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('name');

$table->string('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

Open app/Http/Models/Product.php file and update the following code:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
    protected $fillable = [
        'name',
        'description'
    ];        
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $fillable = [

'name',

'description'

];

}

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

php artisan migrate

1	php artisan migrate

Generate Fake Data

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

php artisan make:factory ProductFactory --model=Product

1	php artisan make:factory ProductFactory --model=Product

Further, put the below code in database\factories\ProductFactory.php:

<?php

namespace Database\Factories;

use App\Models\Product;
use Illuminate\Database\Eloquent\Factories\Factory;

class ProductFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Product::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name,
            'description' => $this->faker->text
        ];
    }
}

<?php

namespace Database\Factories;

use App\Models\Product;

use Illuminate\Database\Eloquent\Factories\Factory;

class ProductFactory extends Factory

{

/**

* The name of the factory's corresponding model.

* @var string

protected $model = Product::class;

/**

* Define the model's default state.

* @return array

public function definition()

{

return [

'name' => $this->faker->name,

'description' => $this->faker->text

];

}

Use the tinker command on the console to generate the test data into the database:

Create Laravel 8 Auto Load More Data on Page Scroll with AJAX

In this Create Laravel 8 Auto Load More Data on Page Scroll with AJAX tutorial I’ll show you how to create infinity scroll or ajax auto load more data pagination on page scroll in laravel using ajax. In this tutorial you will learn to create dynamic auto load more data pagination in laravel using ajax in laravel. In this step by step guide I’ll share example of ajax load more or infinity scroll in laravel using ajax.

Create Laravel 8 Auto Load More Data on Page Scroll with AJAX

In this step by step tutorial I will demonstrate you how to create infinity scroll or ajax auto load more data pagination on page scroll in laravel. Please follow the instruction given below:

Step: 1 Create Laravel Project
Step: 2 Make Database Connection
Step: 3 Create Mode and Run Migration
Step: 4 Generate Dummy Data with Tinker Factory
Step: 5 Generate and Set Up Controller
Step: 6 Create Routes
Step: 7 Set Up View
Step: 8 Start server and Run Project

Create Laravel Project

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

composer create-project laravel/laravel laravel-auto-load-more --prefer-dist

1	composer create-project laravel/laravel laravel-auto-load-more --prefer-dist

Make Database Connection

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=db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db

DB_USERNAME=root

DB_PASSWORD=

Create Mode and Run Migration

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

php artisan make:model Blog -m

1	php artisan make:model Blog -m

Next, update the below code in database/migrations/create_blogs_table.php file:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('post_name');
            $table->string('post_description');            
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('blogs');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('post_name');

$table->string('post_description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('blogs');

}

Add following code in app/Models/Blog.php file:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    use HasFactory;
    protected $fillable = [
        'post_name',
        'post_description'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model

{

use HasFactory;

protected $fillable = [

'post_name',

'post_description'

];

}

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

php artisan migrate

1	php artisan migrate

Add Test Data

In this step we will add some test data. Please run the following command:

php artisan make:factory BlogFactory --model=Blog

1	php artisan make:factory BlogFactory --model=Blog

Further, put the below code in database\factories\BlogFactory.php:

<?php

namespace Database\Factories;

use App\Models\Blog;
use Illuminate\Database\Eloquent\Factories\Factory;

class BlogFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Blog::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'post_name' => $this->faker->name,
            'post_description' => $this->faker->text
        ];
    }
}

<?php

namespace Database\Factories;

use App\Models\Blog;

use Illuminate\Database\Eloquent\Factories\Factory;

class BlogFactory extends Factory

{

/**

* The name of the factory's corresponding model.

* @var string

protected $model = Blog::class;

/**

* Define the model's default state.

* @return array

public function definition()

{

return [

'post_name' => $this->faker->name,

'post_description' => $this->faker->text

];

}

Open terminal, execute the below commands to generate the test data:

How to Get Previous and Next Record in Laravel

In this How to Get Previous and Next Record in Laravel Tutorial I will show you how to get the previous and next record in laravel. In this tutorial you will learn to get the previous and next record in laravel application. Working with any blog application in laravel we have to show the next or previous record in navigation. At that time we need to get the next or previous record from the database table.

How to Get Previous and Next Record in Laravel

In this step by step tutorial I’ll demonstrate you to get the next or previous record or data with URL in laravel. Please follow the instruction given below:

Get Next Record in Laravel

In laravel application next record can be accessed as following:

$next = Blog::where('id', '>', $blog->id)->orderBy('id')->first();

1	$next = Blog::where('id', '>', $blog->id)->orderBy('id')->first();

We have used the where(), first(), orderBy() likewise first() eloquent queries to get the next posts or records from the database.

Get Previous Record in Laravel

In laravel application previous record can be accessed as following:

$previous = Blog::where('id', '<', $blog->id)->orderBy('id','desc')->first();

1	$previous = Blog::where('id', '<', $blog->id)->orderBy('id','desc')->first();

We have used the where(), first(), orderBy() likewise first() eloquent queries to get the next posts or records from the database.

Access Prev / Next Records from Laravel Blade View

Below is example how to access previous and next records with url in blade view file.

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel Fetch Previous and Next Record Example</title>

</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-6">
                @if (isset($previous))
                    <a href="{{ url($previous->url) }}">
                        <div> Previous</div>
                        <p>{{ $previous->title }}</p>
                    </a>
                @endif
            </div>

            <div class="col-6">
                @if (isset($next))
                    <a href="{{ url($next->url) }}">
                        <div>Next</div>
                        <p>{{ $next->title }}</p>
                    </a>
                @endif
            </div>
        </div>
    </div>
</body>

</html>

<!DOCTYPE html>

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

<head>

<title>Laravel Fetch Previous and Next Record Example</title>

</head>

<body>

@if (isset($previous))

<div> Previous</div>

<p>{{ $previous->title }}</p>

</a>

@endif

</div>

@if (isset($next))

<p>{{ $next->title }}</p>

</a>

@endif

</div>

</body>

</html>

Laravel 8 Create JSON Text File for Download using File and Response

In this Laravel 8 Create JSON Text File for Download using File and Response tutorial I will show you how to create json text file using file facade and download using response class in laravel. In this tutorial you will learn to create a json text file using file facade and then download it using laravel response class. In this article I will share example to create and download json text file in laravel application. In this tutorial you will learn convert form data or text file data into json format text file and download it using response class. We will be using laravel File facade class to create your own html file, txt file, php file etc as you want. File Facade Classis meant for laravel file handling with file facade you can create file, remove file, update file etc. We will also be using Laravel “Response” Class. In this example we will be using Laravel Response Class download that file.

Laravel 8 Create JSON Text File for Download using File and Response

In this step by step tutorial I will demonstrate you with example on how to create json text file using file facade and download using response class in laravel. Please follow the instruction given below:

Create Route

In this step we will define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('json-file-download', array('as'=> 'jsonFileDownload', 'uses' => 'JsonController@jsonFileDownload'));

1	Route::get('json-file-download', array('as'=> 'jsonFileDownload', 'uses' => 'JsonController@jsonFileDownload'));

Now, lets create a controller file named JsonController.php in app/Http/Controllers/ directory. Open the JsonController.php file and put the following code in it.

app/Http/Controllers/JsonController.php

<?php
namespace App\Http\Controllers;

use Response;
use View;
use File;

class JsonController extends Controller
{

	public function jsonFileDownload()
    {
	  $data = json_encode(['Text One', 'Text Two', 'Text Three']);
	  
      $jsongFile = time() . '_file.json';

	  File::put(public_path('/upload/json/'.$jsongFile), $data);

	  return Response::download(public_path('/upload/jsonfile/'.$jsongFile));
	}

}

<?php

namespace App\Http\Controllers;

use Response;

use View;

use File;

class JsonController extends Controller

{

public function jsonFileDownload()

{

$data = json_encode(['Text One', 'Text Two', 'Text Three']);

$jsongFile = time() . '_file.json';

File::put(public_path('/upload/json/'.$jsongFile), $data);

return Response::download(public_path('/upload/jsonfile/'.$jsongFile));

}

Laravel 8 Socialite Login with Linkedin Tutorial Example

In this Laravel 8 Socialite Login with Linkedin Tutorial Example I’ll show you how to create LinkedIn login in laravel 8 using socialite. In this tutorial you will learn to integrate LinkedIn login with socialite in laravel. In this article we will create login with linkedin using socialite in laravel 8 application. In this example I will also guide you through the process to integrate login with linkedin using socialite in laravel.

As we all know that users are not much interested in filling up long registration form to register with any application. Allowing users to login with their social media accounts is quick and powerful way to get registered/verified users for your laravel application. 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 I will demonstrate you how to integrate linkedin login with socialite in laravel application. Please follow the instruction given below:

Step 1: Set Up Laravel Project
Step 2: Make Database Connection
Step 3: Install Jetstream Library
Step 4: Configure Socialite Pacakage
Step 5: Add and Migrate Linkedin Property in Users Table
Step 6: Add Linkedin Client ID and Secret
Step 7: Prepare Controller
Step 8: Define Routes
Step 9: Set Up Login View
Step 10: Start Laravel App

Set Up Laravel Project

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

composer create-project laravel/laravel --prefer-dist laravel-linkedin-login-example

1	composer create-project laravel/laravel --prefer-dist laravel-linkedin-login-example

Make Database Connection

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=db_name
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db_name

DB_USERNAME=root

DB_PASSWORD=

Install Jetstream Library

In this step, install jetstream laravel auth scaffolding package with livewire. Please follow the instruction.

composer require laravel/jetstream

1	composer require laravel/jetstream

Now run command to generate ready made auth templates:

php artisan jetstream:install livewire

1	php artisan jetstream:install livewire

Next, use command to install required npm packages:

....
....
'providers' => [
    ....
    ....
    Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
    ....
    ....
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],
....
....

....

'providers' => [

....

Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' => [

....

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

....

Add and Migrate Linkedin Property in Users Table

In this step we will create a migration file. Please run the following command:

php artisan make:migration add_social_auth_id_field

1	php artisan make:migration add_social_auth_id_field

Thereafter add the new table values in the database/migration/add_social_auth_id_field.php file:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddSocialAuthIdField extends Migration
{
/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('oauth_id')->nullable();
            $table->string('oauth_type')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('oauth_id');
           $table->dropColumn('oauth_type');
         });
    }  
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class AddSocialAuthIdField extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

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

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

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

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

$table->dropColumn('oauth_id');

$table->dropColumn('oauth_type');

});

}

Next, open app/Models/User.php file and add new social auth fields within the file:

<?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',
        'oauth_id',
        'oauth_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',

'oauth_id',

'oauth_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',

];

}

Finally, execute command to migrate new values into the user tabel:

Laravel 8 Socialite OAuth Login with Twitter Example Tutorial

In this Laravel 8 Socialite OAuth Login with Twitter Example Tutorial I’ll show you how to create OAuth Twitter login in laravel 8 using socialite. In this tutorial you will learn to integrate twitter login with socialite in laravel. In this article we will create login with twitter using socialite in laravel 8 application. In this example I will also guide you through the process to integrate login with twitter using socialite in laravel.

In this step by step tutorial I will demonstrate you how to integrate twitter login with socialite in laravel application. Please follow the instruction given below:

Step 1: Install Laravel App
Step 2: Make Database Connection
Step 3: Install Laravel Livewire and Jetstream Packages
Step 4: Setting Up Socialite Library
Step 5: Update Social ID in Database
Step 6: Add Twitter Client ID and Secret
Step 7: Build Controller
Step 8: Add Routes
Step 9: Update Login View
Step 10: Run Development Server

Install Laravel App

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

composer create-project laravel/laravel --prefer-dist laravel-twitter-login-example

1	composer create-project laravel/laravel --prefer-dist laravel-twitter-login-example

Make Database Connection

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=db_name
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db_name

DB_USERNAME=root

DB_PASSWORD=

Install Laravel Livewire and Jetstream Packages

In this step, install jetstream laravel auth scaffolding package with livewire. Please follow the instruction.

composer require laravel/jetstream

1	composer require laravel/jetstream

composer require laravel/jetstream

php artisan jetstream:install livewire

1	php artisan jetstream:install livewire

After adding Jetstream, you need to install and build your NPM dependencies and migrate your database:

npm install

npm run dev

php artisan migrate

npm install

npm run dev

php artisan migrate

Setting Up Socialite Library

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

composer require laravel/socialite

1	composer require laravel/socialite

Open config/app.php file, plus add the following services in providers and aliases arrays:

....
....
'providers' => [
    ....
    ....
    Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
    ....
    ....
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],
....
....

....

'providers' => [

....

Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' => [

....

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

....

In this step we will create a migration file. Please run the following command:

php artisan make:migration add_twitter_social_field

1	php artisan make:migration add_twitter_social_field

Get inside the database/migration/add_twitter_social_field.php file, add the given below properties migration file.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddTwitterSocialField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('twitter_id')->nullable();
            $table->string('oauth_type')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('twitter_id');
           $table->dropColumn('oauth_type');
        });
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class AddTwitterSocialField extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

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

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

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

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

$table->dropColumn('twitter_id');

$table->dropColumn('oauth_type');

});

}

Additionally, open app/Models/User.php file and register the social login properties in here as well.

<?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',
        'twitter_id',
        'oauth_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',

'twitter_id',

'oauth_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.

<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>
            </div>


            {{-- Laravel Login with Twitter Demo--}}
            <div class="flex items-center justify-end mt-4">
                <a class="btn" href="{{ url('auth/twitter') }}"
                    style="background: #1E9DEA; padding: 10px; width: 100%; text-align: center; display: block; border-radius:4px; color: #ffffff;">
                    Login with Twitter
                </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>

</div>

<a class="btn" href="{{ url('auth/twitter') }}"

style="background: #1E9DEA; padding: 10px; width: 100%; text-align: center; display: block; border-radius:4px; color: #ffffff;">

</a>

</div>

</form>

</x-jet-authentication-card>

</x-guest-layout>

Build Secure PHP REST API in Laravel 8 with Sanctum Auth

In this Build Secure PHP REST API in Laravel 8 with Sanctum Auth Tutorial I will show you how to create REST API with Sanctum authentication In laravel. In this tutorial you will learn to create rest api with Sanctum authentication In laravel 8 application. In this article I will share example to create simple crud rest api with sanctum authentication in laravel. I will also show you how to install sanctum auth package in laravel. After installing and configure sanctum authentication in laravel we will create simple crud operation rest api.

Build Secure PHP REST API in Laravel 8 with Sanctum Auth

In this step by step tutorial I will guide you through create a fully functional restful API with sanctum authentication in Laravel 8. We will be creating fully functional REST API along with sanctum Authentication. Please follow the instruction given below:

Step 1: Create Laravel Project
Step 2: Add Database Details
Step 3: Install Laravel Sanctum Pacakage
Step 4: Setting Up Sanctum
Step 5: Update Model and Run Migration
Step 6: Build API Resources
Step 7: Set Up Controllers
Step 8: Create REST API Routes
Step 09: Test REST API in Postman

Create Laravel Project

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 laravel-sanctum-auth

1	composer create-project --prefer-dist laravel/laravel laravel-sanctum-auth

Add Database Details in ENV

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=db_name
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db_name

DB_USERNAME=root

DB_PASSWORD=

Install Laravel Sanctum Pacakage

In this step, we will install Sanctum Package via the composer dependency manager. Use the following command to install Sanctum Package.

composer require laravel/sanctum

1	composer require laravel/sanctum

Setting Up Sanctum

Now, we need to publish the Sanctum configuration and migration files using the Artisan command.

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

1	php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

Thereafter, register the sanctum middleware into the api array inside the app/Http/Kernel.php file

protected $middlewareGroups = [
...
...
    'api' => [
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
...
...
];

protected $middlewareGroups = [

...

'api' => [

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

'throttle:api',

\Illuminate\Routing\Middleware\SubstituteBindings::class,

...

];

Now, run following command to migrate database schema along with sanctum tables in our database.

php artisan migrate

1	php artisan migrate

Lets Import the sanctum HasApiTokens service within the app/Models/User.php. Open App/User.php model file and add ‘Laravel\Sanctum\HasApiTokens’ trait in it.

<?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;

// sanctum
use Laravel\Sanctum\HasApiTokens;


class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

<?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;

// sanctum

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable

{

use HasApiTokens, HasFactory, Notifiable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name',

'email',

'password',

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password',

'remember_token',

];

/**

* The attributes that should be cast to native types.

* @var array

protected $casts = [

'email_verified_at' => 'datetime',

];

}

Update Model and Run Migration

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

php artisan make:migration create_blogs_table

1	php artisan make:migration create_blogs_table

Open and add code into the database/migrations/create_blogs_table.php file. Add few properties into the migration file as following.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('blogs');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('blogs');

}

Next, create an app/Models/Blog.php file and register product migration properties inside the $fillable array.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    use HasFactory;
    protected $fillable = [
        'title', 
        'description'
    ];    
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model

{

use HasFactory;

protected $fillable = [

'title',

'description'

];

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

<?php


namespace App\Http\Controllers\API;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller as Controller;


class BaseController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function sendResponse($result, $message)
    {
    	$response = [
            'success' => true,
            'data'    => $result,
            'message' => $message,
        ];

        return response()->json($response, 200);
    }


    /**
     * return error response.
     *
     * @return \Illuminate\Http\Response
     */
    public function sendError($error, $errorMessages = [], $code = 404)
    {
    	$response = [
            'success' => false,
            'message' => $error,
        ];

        if(!empty($errorMessages)){
            $response['data'] = $errorMessages;
        }

        return response()->json($response, $code);
    }
}

<?php

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller as Controller;

class BaseController extends Controller

{

/**

* success response method.

* @return \Illuminate\Http\Response

public function sendResponse($result, $message)

{

$response = [

'success' => true,

'data' => $result,

'message' => $message,

];

return response()->json($response, 200);

}

/**

* return error response.

* @return \Illuminate\Http\Response

public function sendError($error, $errorMessages = [], $code = 404)

{

$response = [

'success' => false,

'message' => $error,

];

if(!empty($errorMessages)){

$response['data'] = $errorMessages;

}

return response()->json($response, $code);

}

Open and place all the suggested code into the app/Http/Controllers/API/AuthController.php file.

<?php
   
namespace App\Http\Controllers\API;
   
use Illuminate\Http\Request;
use App\Http\Controllers\API\BaseController as BaseController;
use Illuminate\Support\Facades\Auth;
use Validator;
use App\Models\User;
   
class AuthController extends BaseController
{

    public function signin(Request $request)
    {
        if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){ 
            $authUser = Auth::user(); 
            $success['token'] =  $authUser->createToken('MyAuthApp')->plainTextToken; 
            $success['name'] =  $authUser->name;
   
            return $this->sendResponse($success, 'User signed in');
        } 
        else{ 
            return $this->sendError('Unauthorised.', ['error'=>'Unauthorised']);
        } 
    }

    public function signup(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required',
            'confirm_password' => 'required|same:password',
        ]);
   
        if($validator->fails()){
            return $this->sendError('Error validation', $validator->errors());       
        }
   
        $input = $request->all();
        $input['password'] = bcrypt($input['password']);
        $user = User::create($input);
        $success['token'] =  $user->createToken('MyAuthApp')->plainTextToken;
        $success['name'] =  $user->name;
   
        return $this->sendResponse($success, 'User created successfully.');
    }
   
}

<?php

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;

use App\Http\Controllers\API\BaseController as BaseController;

use Illuminate\Support\Facades\Auth;

use Validator;

use App\Models\User;

class AuthController extends BaseController

{

public function signin(Request $request)

{

if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){

$authUser = Auth::user();

$success['token'] = $authUser->createToken('MyAuthApp')->plainTextToken;

$success['name'] = $authUser->name;

return $this->sendResponse($success, 'User signed in');

}

else{

return $this->sendError('Unauthorised.', ['error'=>'Unauthorised']);

}

public function signup(Request $request)

{

$validator = Validator::make($request->all(), [

'name' => 'required',

'email' => 'required|email',

'password' => 'required',

'confirm_password' => 'required|same:password',

]);

if($validator->fails()){

return $this->sendError('Error validation', $validator->errors());

}

$input = $request->all();

$input['password'] = bcrypt($input['password']);

$user = User::create($input);

$success['token'] = $user->createToken('MyAuthApp')->plainTextToken;

$success['name'] = $user->name;

return $this->sendResponse($success, 'User created successfully.');

}

Now go to the app/Http/Controllers/API/BlogController.php file and insert the CRUD operations code into it:

<?php
   
namespace App\Http\Controllers\API;
   
use Illuminate\Http\Request;
use App\Http\Controllers\API\BaseController as BaseController;
use Validator;
use App\Models\Blog;
use App\Http\Resources\Blog as BlogResource;
   
class BlogController extends BaseController
{

    public function index()
    {
        $blogs = Blog::all();
        return $this->sendResponse(BlogResource::collection($blogs), 'Posts fetched.');
    }

    
    public function store(Request $request)
    {
        $input = $request->all();
        $validator = Validator::make($input, [
            'title' => 'required',
            'description' => 'required'
        ]);
        if($validator->fails()){
            return $this->sendError($validator->errors());       
        }
        $blog = Blog::create($input);
        return $this->sendResponse(new BlogResource($blog), 'Post created.');
    }

   
    public function show($id)
    {
        $blog = Blog::find($id);
        if (is_null($blog)) {
            return $this->sendError('Post does not exist.');
        }
        return $this->sendResponse(new BlogResource($blog), 'Post fetched.');
    }
    

    public function update(Request $request, Blog $blog)
    {
        $input = $request->all();

        $validator = Validator::make($input, [
            'title' => 'required',
            'description' => 'required'
        ]);

        if($validator->fails()){
            return $this->sendError($validator->errors());       
        }

        $blog->title = $input['title'];
        $blog->description = $input['description'];
        $blog->save();
        
        return $this->sendResponse(new BlogResource($blog), 'Post updated.');
    }
   
    public function destroy(Blog $blog)
    {
        $blog->delete();
        return $this->sendResponse([], 'Post deleted.');
    }
}

<?php

namespace App\Http\Controllers\API;

use Illuminate\Http\Request;

use App\Http\Controllers\API\BaseController as BaseController;

use Validator;

use App\Models\Blog;

use App\Http\Resources\Blog as BlogResource;

class BlogController extends BaseController

{

public function index()

{

$blogs = Blog::all();

return $this->sendResponse(BlogResource::collection($blogs), 'Posts fetched.');

}

public function store(Request $request)

{

$input = $request->all();

$validator = Validator::make($input, [

'title' => 'required',

'description' => 'required'

]);

if($validator->fails()){

return $this->sendError($validator->errors());

}

$blog = Blog::create($input);

return $this->sendResponse(new BlogResource($blog), 'Post created.');

}

public function show($id)

{

$blog = Blog::find($id);

if (is_null($blog)) {

return $this->sendError('Post does not exist.');

}

return $this->sendResponse(new BlogResource($blog), 'Post fetched.');

}

public function update(Request $request, Blog $blog)

{

$input = $request->all();

$validator = Validator::make($input, [

'title' => 'required',

'description' => 'required'

]);

if($validator->fails()){

return $this->sendError($validator->errors());

}

$blog->title = $input['title'];

$blog->description = $input['description'];

$blog->save();

return $this->sendResponse(new BlogResource($blog), 'Post updated.');

}

public function destroy(Blog $blog)

{

$blog->delete();

return $this->sendResponse([], 'Post deleted.');

}

Create REST API Routes

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

<?php
  
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\API\AuthController;
use App\Http\Controllers\API\BlogController;
  
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
*/
  
Route::post('login', [AuthController::class, 'signin']);
Route::post('register', [AuthController::class, 'signup']);
     
Route::middleware('auth:sanctum')->group( function () {
    Route::resource('blogs', BlogController::class);
});

<?php

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\API\AuthController;

use App\Http\Controllers\API\BlogController;

|--------------------------------------------------------------------------

| API Routes

|--------------------------------------------------------------------------

Route::post('login', [AuthController::class, 'signin']);

Route::post('register', [AuthController::class, 'signup']);

Route::middleware('auth:sanctum')->group( function () {

Route::resource('blogs', BlogController::class);

});

Test Sanctum REST API in Postman

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

Test Register REST API

http://localhost:8000/api/register

1	http://localhost:8000/api/register

http://localhost:8000/api/login

1	http://localhost:8000/api/login

Create Post with Sanctum API

http://localhost:8000/api/blogs

1	http://localhost:8000/api/blogs

Get Single Post

http://localhost:8000/api/blogs/{id}

1	http://localhost:8000/api/blogs/{id}

Fetch All Posts

http://localhost:8000/api/blogs

1	http://localhost:8000/api/blogs

Update Post

http://localhost:8000/api/blogs/{id}

1	http://localhost:8000/api/blogs/{id}

Delete Record

http://localhost:8000/api/blogs/{id}

1	http://localhost:8000/api/blogs/{id}

Create Events in Laravel 8 using Fullcalendar and jQuery AJAX

In this Create Events in Laravel 8 using Fullcalendar and jQuery AJAX Tutorial I’ll show you how to create and display events on the calendar using fullcalendar and jquery ajax in laravel 8 application. In this tutorial you will learn to create and display events on the calendar using fullcalendar with jquery ajax in laravel 8. This tutorial you will also learn to show dynamic event data on calendar using fullcalendar and jquery ajax in laravel 8.

How to Create Laravel 8 Fullcalendar CRUD Events

In this step by step tutorial I will demonstrate you how to create events on the calendar using fullcalendar and jquery ajax in laravel 8 application. Please follow the instruction below:

Step 1: Create Laravel App
Step 2: Connect to Database
Step 3: Set Up Migration and Model
Step 4: Generate and Configure Controller
Step 5: Create and Add Routes
Step 6: Create Blade View
Step 7: Run Development Server

Create Laravel 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 full-calendar-demo

1	composer create-project --prefer-dist laravel/laravel full-calendar-demo

Now switch into the project directory using following command:

cd full-calendar-demo

1	cd full-calendar-demo

Connect 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=db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db

DB_USERNAME=root

DB_PASSWORD=

Set Up Migration and Model

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

php artisan make:model CrudEvents -m

1	php artisan make:model CrudEvents -m

Now, open the app/Models/CrudEvents.php file and create a $fillable array and define the crud events values.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class CrudEvents extends Model
{
    use HasFactory;
    
    protected $fillable = [
        'event_name', 
        'event_start', 
        'event_end'
    ];    
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class CrudEvents extends Model

{

use HasFactory;

protected $fillable = [

'event_name',

'event_start',

'event_end'

];

}

Further, add event_name, event_start and event_end values inside the database/migrations/create_crud_events_table.php file.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCrudEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('crud_events', function (Blueprint $table) {
            $table->id();
            $table->string('event_name');
            $table->date('event_start');
            $table->date('event_end');            
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('crud_events');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateCrudEventsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('event_name');

$table->date('event_start');

$table->date('event_end');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('crud_events');

}

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

How to make dependent dropdown with Vue js and Laravel 8

In this Laravel 8 Vue js Dependent Dropdown Example tutorial, I’ll show you how to create dependent dropdown with Vue Js in laravel 8. In this tutorial you will learn to implement dependent dropdown with Vue Js in laravel 8. In this tutorial we will be creating simple country dependent dropdown example to demonstrate dependent dropdown example in laravel.

In this step be step guide I will demonstrate you with example how to create dependent dropdown with Vue Js in laravel 8.

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

Let’s 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

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.

<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. 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 Form Submit with V form Package

In this Laravel 8 vue js form submit with v-form package tutorial I will show you how to submit form with V form package in laravel 8 with Vue Js. In this tutorial you will learn submit form data without refreshing the page using v-form package in laravel 8 with Vue Js. Before submit we will also validate the form data and display error message if validation fails.

Laravel 8 Vue Js Form Submit with V form Package

In this step by step tutorial I will demonstrate you how to use laravel vue js v-form package and Laravel Vue axios validation example. Please follow the instruction given below:

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Add On Migration File
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: Download Laravel Fresh 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: Add Database Details

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: Add On Migration File

In this step, you need to open create_users_table.php migration file from database>migrations and replace up() function with following code:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('username')->unique();
            $table->string('email',191)->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('username')->unique();

$table->string('email',191)->unique();

$table->string('password');

$table->rememberToken();

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('users');

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Now, you need to update user model. Please put the following code in it.

App\Models\User.php

namespace App/Models;
 
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
 
class User extends Authenticatable
{
    use Notifiable;
    
    protected $guarded = [];
 
    public function setPasswordAttribute($value)
    {
        $this->attributes['password'] = \Hash::make($value);
    }
}

namespace App/Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

class User extends Authenticatable

{

use Notifiable;

protected $guarded = [];

public function setPasswordAttribute($value)

{

$this->attributes['password'] = \Hash::make($value);

}

Step 4: NPM Configuration

You need to setup Vue and install Vue dependencies using NPM. So run the following command on command prompt:

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Install v-form via npm

npm i axios vform

1	npm i axios vform

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\AuthController;
 
Route::get('register', [AuthController::class, 'show_signup_form']->name('register');
Route::post('register', [AuthController::class, 'process_signup']);

use App\Http\Controllers\AuthController;

Route::get('register', [AuthController::class, 'show_signup_form']->name('register');

Route::post('register', [AuthController::class, 'process_signup']);

Step 6: Create Controller By Command

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

php artisan make:controller AuthController

1	php artisan make:controller AuthController

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

<?php
namespace App\Http\Controllers;
 
use App\Models\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\View;
 
class AuthController extends Controller
{   
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
 
    public function show_signup_form()
    {
        if (View::exists('auth.register')) {
             
            return view('auth.register');
 
        }
    }
 
    public function process_signup(Request $request)
    {
        $this->validate($request, [ 
            'username' => 'required',
            'email' => 'required',
            'password' => 'required|confirmed|min:6',
        ]);
 
        $user = new User;
        $user->username = $request->username;
        $user->email = strtolower($request->email);
        $user->password = $request->password;
        $user->save();
 
        return response()->json(
            [
                'success' => true,
                'message' => 'Registration is completed'
            ]
        );
 
    }
 
}

<?php

namespace App\Http\Controllers;

use App\Models\User;

use Carbon\Carbon;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Illuminate\Support\Facades\View;

class AuthController extends Controller

{

public function __construct()

{

$this->middleware('guest')->except('logout');

}

public function show_signup_form()

{

if (View::exists('auth.register')) {

return view('auth.register');

}

public function process_signup(Request $request)

{

$this->validate($request, [

'username' => 'required',

'email' => 'required',

'password' => 'required|confirmed|min:6',

]);

$user = new User;

$user->username = $request->username;

$user->email = strtolower($request->email);

$user->password = $request->password;

$user->save();

return response()->json(

[

'success' => true,

'message' => 'Registration is completed'

]

);

}

Step 7: Create Vue Component

Now, we will create a Vue compoent. Go to resources/assets/js/components folder and create a filed called FileUpload.vue. And put the following code into your RegisterComponent.vue components file:

<template>
<div class="container">
<div class="post">
<div class="postinfotop">
<h2>Create New Account</h2>
<p id="text" style="color:green; margin-left:100px;"></p>
</div>
<form action="#" class="form newtopic" @submit.prevent="register">
<div class="accsection">
<div class="topwrap">
<div class="userinfo pull-left">
</div>
<div class="posttext pull-left">
<div>
<input v-model="form.username" type="text" placeholder="Username" class="form-control" :class="{ 'is-invalid': form.errors.has('username') }" name="username">
<has-error :form="form" field="username"></has-error>
</div>
<div>
<input v-model="form.email" type="text" placeholder="Email" class="form-control" :class="{ 'is-invalid': form.errors.has('email') }" name="email">
<has-error :form="form" field="email"></has-error>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<input v-model="form.password" type="text" placeholder="password" class="form-control" :class="{ 'is-invalid': form.errors.has('password') }" name="password">
<has-error :form="form" field="password"></has-error>
</div>
<div class="col-lg-6 col-md-6">
<input v-model="form.password_confirmation" type="text" placeholder="Confirm password" class="form-control" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" name="password_confirmation">
<has-error :form="form" field="password_confirmation"></has-error>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>  
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
</div>
</template>
<script>
export default {
data () {
return {
form: new Form({
username: '',
email: '',
password: '',
password_confirmation: '',
})
}
},
methods: {
register () {
this.form.post('/register')
.then(( response ) => { 
var attr = document.getElementById("text");
attr.innerHTML = response.data.message;  
this.form.reset();
})
},
}       
}
</script>

<h2>Create New Account</h2>

</div>

</div>

<div>

<has-error :form="form" field="username"></has-error>

</div>

<div>

<has-error :form="form" field="email"></has-error>

</div>

<has-error :form="form" field="password"></has-error>

</div>

<has-error :form="form" field="password_confirmation"></has-error>

</div>

</div>

</form>

</div>

</template>

export default {

data () {

return {

form: new Form({

username: '',

email: '',

password: '',

password_confirmation: '',

})

}

methods: {

this.form.post('/register')

.then(( response ) => {

var attr = document.getElementById("text");

attr.innerHTML = response.data.message;

this.form.reset();

})

}

</script>

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

require('./bootstrap');
window.Vue = require('vue');
//Import v-from
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
//component
Vue.component('register-component', require('./components/RegisterComponent.vue').default);
const app = new Vue({
el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

//Import v-from

import { Form, HasError, AlertError } from 'vform'

window.Form = Form;

Vue.component(HasError.name, HasError)

Vue.component(AlertError.name, AlertError)

//component

Vue.component('register-component', require('./components/RegisterComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 8: Register Vue App

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

<!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>Document</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>Document</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

Now go to resources/views/auth/register.blade.php file and paste this code.

resources/views/auth/register.blade.php

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

@extends('layouts.app')

@section('content')

<register-component></register-component>

@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

How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA)

Install Laravel App

Database Connection

Set Up Model and Run Migration

Create Product Controller

Create CRUD Routes

Install Laravel Vue UI

Initiate Vue in Laravel

Crete Vue CRUD Components

Create Vue CRUD Routes

Define Vue App.js

Start Laravel Vue CRUD App

Create Datatables in Laravel 8 Vue JS Application

Install Laravel App

Database Connection

Model and Migration

Add Test Data with Factory

Define Controller

Create Route

Install Laravel Vue UI

Setting Up Vue JS in Laravel

Start Laravel Vue CRUD App

How to Create Infinite Scroll Load More in Laravel 8 Vue JS App

Install Laravel Project

Add Database Details

Create Model and Run Migration

Generate Fake Data

Generate and Configure Controller

Create Route

Install Laravel Vue UI

Install Vue Infinite Loading

Set Up Vue JS in Laravel

Test Application

Create Laravel 8 Auto Load More Data on Page Scroll with AJAX

Create Laravel Project

Make Database Connection

Create Mode and Run Migration

Add Test Data

Generate and Set Up Controller

Create Route

Set up Blade View Template

Start server and Run Project

How to Get Previous and Next Record in Laravel

Get Next Record in Laravel

Get Previous Record in Laravel

Access Prev / Next Records from Laravel Blade View

Laravel 8 Create JSON Text File for Download using File and Response

Create Route

Laravel Socialite Login with LinkedIn

Laravel 8 Socialite Login with Linkedin Tutorial Example

Set Up Laravel Project

Make Database Connection

Install Jetstream Library

Configure Socialite Pacakage

Add and Migrate Linkedin Property in Users Table

Add Linkedin Client ID and Secret

Prepare Controller

Define Routes

Set Up Login View

Start Laravel App

Laravel Socialite Login with Twitter

Laravel 8 Socialite OAuth Login with Twitter Example Tutorial

Install Laravel App

Make Database Connection

Install Laravel Livewire and Jetstream Packages

Setting Up Socialite Library

Update Social ID in Database

Add Twitter Client ID and Client Secret

Build Controller

Add Routes

Update Login View

Run Development Server

Build Secure PHP REST API in Laravel 8 with Sanctum Auth

Create Laravel Project

Add Database Details in ENV

Install Laravel Sanctum Pacakage

Setting Up Sanctum

Update Model and Run Migration

Build API Resources

Setting Up Controllers