Laravel vuex boostrap crud

Demo:

Setup laravel

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

Setup vuejs

vue create laravel-vue-crud

Xem hướng dẫn setup project vuejs ở đây
Database Connection

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuejs
DB_USERNAME=root
DB_PASSWORD=

Set Up Model and Run Migration

php artisan make:model Product -m

Add following code in database/migrations/create_products_table.php

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'
    ];    
}

Run migration

php artisan migrate

Create Product Controller

php artisan make:controller ProductController

Open and update the below code in app\Http\Controllers\ProductController.php:

Remove \Fruitcake\Cors\HandleCors::class in laravel-vue-crud\app\Http\Kernel.php

protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        //\Fruitcake\Cors\HandleCors::class,
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

Edit routes\api.php

Cấu hình vuejs
Setup thư viện axios

npm install --save axios

Thêm boostrap 5 vào public/index.html

Sửa file App.vue

<template>
    <div class="container"> 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Products List</router-link>
                    <router-link to="/create" class="nav-item nav-link">Create Product</router-link>
                </div>
            </div>
        </nav>

        <router-view> </router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

Tạo 3 file sau trong folder components

AllProduct.vue
CreateProduct.vue
EditProduct.vue

Edit components\AllProduct.vue

Edit components\CreateProduct.vue

Edit component components\EditProduct.vue

Edit route\index.js

import {
    createRouter,
    createWebHistory
} from 'vue-router'
import Home from '../components/AllProduct.vue'
import Create from '../components/CreateProduct.vue'
import Edit from '../components/EditProduct.vue'
const routes = [{
    path: '/',
    name: 'Home',
    component: Home
}, {
    name: 'create',
    path: '/create',
    component: Create
}, {
    name: 'edit',
    path: '/edit/:id',
    component: Edit
}, ]
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})
export default router

Edit store/index.js

Quay lại terminal folder vuejs project và chạy:

npm run serve

Source code laravel in here
Source code vuejs in here