Laravel8 vue js, Inertia js, tailwind Single Page Application For Beginners
Step 1: Install Laravel 8
Now, we need to install laravel 8 app using composer command. Run below command to install
composer global require laravel/installer
and then run
laravel new inertia —jet
Step 2: Create Model
Here, we need to create database migration for articles table and also we will create model for articles table.
php artisan make:model Article -m
database\migrations
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateArticlesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('articles');
}
}
Now run php artisan migrate command to create article table.
App/Models/Article.php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
use HasFactory;
protected $fillable = [
'title'
];
}
Step 3: Create Route
In third step, we will create routes for crud app. so create route here.
routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArticleController;
Route::get(‘/‘, function () { return view(‘welcome’); });
Route::middleware([‘auth:sanctum’, ‘verified’])->get(‘/dashboard’, function () {
return Inertia\Inertia::render(‘Dashboard’);
})->name(‘dashboard’);
Route::get(‘/article’, [ArticleController::class, ‘index’]);
Route::post(‘/article’, [ArticleController::class, ‘store’]);
Route::patch(‘/article/edit/{id}’, [ArticleController::class, ‘update’]);
Route::delete(‘/article/delete/{id}’, [ArticleController::class, ‘delete’]);
Step 4: Create Controller
In this step, we will create article controller file and add following code on it.
app/Http/Controllers/ArticleController.php
namespace App\Http\Controllers;
use Inertia\Inertia;
use App\Models\Article;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class ArticleController extends Controller
{
public function index(Article $article)
{
return Inertia::render(‘Article’, [
‘data’ => $article->latest()->get()
]
);
}
public function store(Request $request)
{
Validator::make($request->all(), [
'title' => ['required'],
])->validate();
Article::create($request->all());
return redirect()->back()
->with('message', 'Article Created Successfully.');
}
public function update(Request $request)
{
Validator::make($request->all(), [
'title' => ['required'],
])->validate();
if ($request->has('id')) {
Article::find($request->input('id'))->update($request->all());
return redirect()->back()
->with('message', 'Post Updated Successfully.');
}
}
public function delete(Request $request)
{
$request->has('id') ?
Article::find($request->input('id'))->delete() :
redirect()->back()
->with('errors', 'Somethings goes wrong.');
return redirect()->back()
->with('message', 'Article deleted successfully.');
}
}
Step 5: Share Inertia Var Globally
Here, i will create ‘message’ and ‘errors’ variable for success message and validation error so. we need to share this variables on appservices provider so that we can call it from our view component.
app/Providers/AppServiceProvider.php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Session;
use Inertia\Inertia;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Inertia::share([
'errors' => function () {
return Session::get('errors')
? Session::get('errors')->getBag('default')->getMessages()
: (object) [];
},
]);
Inertia::share('flash', function () {
return [
'message' => Session::get('message'),
];
});
}
}
Step 6: Create View Template
Here, we need to create article page. View file where we will write code to list of article and create and update model code.
resources/js/Pages/Article.vue
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Article List
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg px-4 py-4">
<div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert" v-if="$page.flash.message">
<div class="flex">
<div>
<p class="text-sm">{{ $page.flash.message }}</p>
</div>
</div>
</div>
<button @click="openModal()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create New Post</button>
<table class="table-fixed w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-4 py-2 w-20">No.</th>
<th class="px-4 py-2">Title</th>
<th class="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="row in data" :key="row.id">
<td class="border px-4 py-2">{{ row.id }}</td>
<td class="border px-4 py-2">{{ row.title }}</td>
<td class="border px-4 py-2">
<button @click="edit(row)" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button @click="deleteRow(row)" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
</td>
</tr>
</tbody>
</table>
<div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400" v-if="isOpen">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<form>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="">
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Title" v-model="form.title">
<div v-if="$page.errors.title" class="text-red-500">{{ $page.errors.title[0] }}</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5" v-show="!editMode" @click="save(form)">
Save
</button>
</span>
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5" v-show="editMode" @click="update(form)">
Update
</button>
</span>
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button @click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout'
import Welcome from '@/Jetstream/Welcome'
export default {
components: {
AppLayout,
Welcome,
},
props: ['data', 'errors'],
data() {
return {
editMode: false,
isOpen: false,
form: {
title: null,
},
}
},
methods: {
openModal() {
this.isOpen = true;
},
closeModal() {
this.isOpen = false;
this.reset();
this.editMode=false;
},
reset() {
this.form = {
title: null,
body: null,
}
},
save(data) {
this.$inertia.post('/article', data)
this.reset();
this.closeModal();
this.editMode = false;
},
edit(data) {
this.form = Object.assign({}, data);
this.editMode = true;
this.openModal();
},
update(data) {
data._method = 'PATCH';
this.$inertia.post('/article/edit/' + data.id, data)
this.reset();
this.closeModal();
},
deleteRow(data) {
if (!confirm('Are you sure want to remove?')) return;
data._method = 'DELETE';
this.$inertia.post('/article/delete/' + data.id, data)
this.reset();
this.closeModal();
},
},
}
</script>
Now we need to compile our js code. run below command. so let’s run it as bellow:
npm install
then
npm run watch
Now just visit below link to see crud operation using inertia js with Laravel
LINK http://127.0.0.1:8000/article or localhost:8000/article
👍