Hello Artisan,
In this Laravel vue js crud example, I will show you a complete single page application using vue js in Laravel 9. From this laravel 9 vue js crud example, You will learn how to create a crud project in Laravel 9 using vue js.
In this laravel vue js full project tutorial, I will create a simple crud application using vue js. I will use sweet alert for success message after form submission and I will use v-form for form validation. You know that we can use vue js in Laravel for single page application (spa) or we can use vue js as component wise in laravel blade.
You will learn step by step how to install vue js in Laravel 9 and how to create a crud application in laravel 9 with vue js and sweet alert. I will use modal to create and update data to create this laravel crud operation with vue js.
So let's start laravel 9 vue js crud example step by step tutorial for beginner:
Step 1: Install Laravel
In this step, we will download the fresh Laravel 9 app. Download it by the below command.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Category table and model
In this step, I will use the Category model and categories table to create vue js laravel crup single page application. So paste this below code to your categories table.
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCategoriesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('categories', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('categories');
}
}
After creating categories
table you should create Item model for items, so first create a file in this path app/Category.php
and put bellow content in user.php file:
app/Category.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
protected $guarded = [];
}
Now run the migration command after set up your database.
Step 3: Define the API routes
Now, we need to define the API routes inside the routes >> api.php file.
routes/api.php
//Vue js Api Route
Route::apiResources(
[
'category' => 'API\CategoryController'
]
);
Step 4: Create Controller
To quickly generate an API resource controller that does not include the create
or edit
methods, use the --api
switch when executing the make:controller
command:
php artisan make:controller API/CategoryController --api
Step 5 : Install Vue dependency
Now, go inside the project folder and install the frontend dependencies using the following command.
npm install
Now we have to install v-form for client-side validation. Read their documentation to learn more about how to use it and how v-form works.
npm i axios vform
Now run this command to install laravel vue pagination package
npm install laravel-vue-pagination
Now run the command to compile our all javascript files.
composer require laravel/ui
//then
php artisan ui vue
//then
npm install watch
Step 6: Setup app.js
Now time to update our app.js file. update it like below
resources/js/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)
//Pagination laravel-vue-pagination
Vue.component('pagination', require('laravel-vue-pagination'));
let Fire = new Vue()
window.Fire = Fire;
Vue.component('category-component', require('./components/CategoryComponent.vue').default);
const app = new Vue({
el: '#app',
router
});
Step 7 : Update Controller
Now we have to update our controller like below to make vue js laravel crud tutorial
App\Http\Controllers\API\CategoryController.php
namespace App\Http\Controllers\API;
use App\Category;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
class CategoryController extends Controller
{
public function index( Request $request )
{
return $request->ajax() ? Category::paginate(5) : abort(404);
}
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required|unique:categories',
]);
Category::create($request->all());
return response()->json(['success' => 'Category created successfully'],Response::HTTP_OK);
}
public function show($id)
{
//
}
public function update(Request $request, $id)
{
$this->validate($request, [
'name' => 'required',
]);
$supplier = Category::findOrFail($id);
$supplier->update($request->all());
return response()->json(['success' => 'Category updated successfully'],Response::HTTP_OK);
}
public function destroy($id)
{
$category = Category::findOrFail($id);
$category->delete();
return response()->json(['success' => 'Category deleted successfully'],Response::HTTP_OK);
}
}
Step 8: Create Blade File
In this step, we have to create only one blade file that will manage create, update, delete data in vue js and laravel..
resources/views/master.blade.php
Recommended : Laravel 8.x Vue js CRUD Example With Vue Router
resources/js/components/CategoryComponent.vue
Now we have to show our component in blade file, Do it like below
Route::get('test',function(){
return view('test');
});
resources/views/test.blade.php
Now everything is done. Now you are ready to check it. Hope it will help you.
#laravel #laravel-9x #crud #vue-js