mehmetcansahin/laravel-vue-crud

Vue Laravel Crud Template

Laravel Vue Crud

Guide

$ php artisan make:model Models/Post -m
$ php artisan make:seeder PostTableSeeder
$ php artisan make:resource Post
$ php artisan make:request Post
$ php artisan make:controller API/Admin/PostController
$ php artisan migrate:fresh --seed

Element	Listing	Disabled	Readonly	Multiple	Options	Editor	Render	dateFormat	enableTime
text	✓	✓	✓	x	x	x	x	x	x
textarea	✓	✓	x	x	x	✓	✓	x	x
select	✓	✓	x	✓	✓	x	x	x	x
image	✓	x	x	✓	x	x	x	x	x
checkbox	✓	✓	x	✓	x	x	x	x	x
date	✓	✓	x	x	x	x	x	✓	✓
toggle	x	✓	x	x	x	x	x	x	x
radio	x	✓	x	x	x	x	x	x	x
range	x	✓	x	x	x	x	x	x	x
colorpicker	x	✓	x	x	x	x	x	x	x
password	x	✓	x	x	x	x	x	x	x

Attr	Value	Extra
Listing	boolean
Disabled	boolean
Readonly	boolean
Multiple	boolean
Options	array	[['value' => 'valueResult', 'label' => 'labelText']]
Editor	boolean
Render	boolean
dateFormat	string	default value is "Y-m-d H:i" but change like this "d-m-Y"
enableTime	boolean	default value is true but change this false

toggle Attr
*titleOn->string
*titleOff->string

radio Attr Example
[
    'name' => 'title', 
    'type' => 'radio', 
    'title' => 'Başlık', 
    'listing' => true,
    'values' => [
        'Deneme',
        'Hayat Güzel',
        'Ondokuzon'
    ]
],

app/Http/Resources/Post.php in;

public function with($request)
{
    return [
        'meta' => [
            'fields' => [
                [
                    'name' => 'name',
                    'type' => 'text',
                    'title' => 'Title',
                    'listing' => true,
                    'disabled' => true
                ],
                [
                    'name' => 'name',
                    'type' => 'select',
                    'title' => 'Title',
                    'listing' => false,
                    'multiple' => true,
                    'options' => [
                        ['value' => 1, 'text' => 'Film'],
                        ['parent' => 1, 'value' => 2, 'text' => 'Sci-fi'],
                    ]
                ],
                [
                    'name' => 'name',
                    'type' => 'textarea',
                    'title' => 'Title',
                    'listing' => false,
                    'editor' => true
                ],
                [
                    'name' => 'name',
                    'type' => 'image',
                    'title' => 'Title',
                    'listing' => false,
                    'multiple' => true
                ],
            ],
        ],
    ];
}

API\Admin\PostController in;

namespace App\Http\Controllers\API\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\Post; // Model
use App\Http\Resources\Post as PostResource; // Resource
use App\Http\Requests\Post as PostRequest; // Validation

class PostController extends Controller
{
    public function index(Request $request)
    {
        // list & filter posts code
        return new PostResource($posts->paginate($paginate));
    }

    public function show($id)
    {
        // get post data
        return new PostResource($post);
    }

    public function save(PostRequest $request, $id = null)
    {
        // create & update post code
        return response()->json(['status' => 'success']);
    }

    public function destroy($id)
    {
        // destory posts
        return response()->json(['status' => 'success']);
    }
}

api.php in;

Route::middleware(['auth:api', 'admin'])->name('admin.')->prefix('admin')->group(function () {
    Route::get('/posts', 'API\Admin\PostController@index');
    Route::post('/posts', 'API\Admin\PostController@index');
    Route::get('/posts/{id}', 'API\Admin\PostController@show');
    Route::post('/posts/save', 'API\Admin\PostController@save');
    Route::post('/posts/{id}', 'API\Admin\PostController@save');
    Route::post('/posts/{id}/destroy', 'API\Admin\PostController@destroy');
});

// file upload for editor
Route::post('uploadImage', function (Request $request) {
    $name = $request->file('image')->store('images');
    return response()->json(asset('storage/' . $name));
});

Usage;

<vue-crud-table api-url="{{ url('/api/admin/posts') }}" api-token="api_token" upload-path="{{ url('api/uploadImage') }}" />

Development

.env.local

VUE_APP_TOKEN={token}
VUE_APP_API_URL={api_url}
VUE_APP_UPLOAD_PATH={upload_path}

$ npm run serve