Scribd
Upload
301 views5 pages

Laravel 8 Jetstream Vue - Js + CRUD: by Ahmad Safar @faropedia

This document provides instructions for setting up a Laravel 8 Jetstream project with Vue.js and CRUD functionality. It includes requirements like installing XAMPP, Composer, and VS Code extensions. Steps are outlined for installing Laravel 8 and Jetstream, linking storage, configuring files, creating a database and migrating. Authorization and roles are implemented using Laravel Policies on the server-side and shared data in Vue.js on the client-side. Advanced roles management using spatie/laravel-permission is mentioned for future implementation.

Uploaded by

Aldin Al
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
301 views5 pages

Laravel 8 Jetstream Vue - Js + CRUD: by Ahmad Safar @faropedia

This document provides instructions for setting up a Laravel 8 Jetstream project with Vue.js and CRUD functionality. It includes requirements like installing XAMPP, Composer, and VS Code extensions. Steps are outlined for installing Laravel 8 and Jetstream, linking storage, configuring files, creating a database and migrating. Authorization and roles are implemented using Laravel Policies on the server-side and shared data in Vue.js on the client-side. Advanced roles management using spatie/laravel-permission is mentioned for future implementation.

Uploaded by

Aldin Al
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Laravel 8 Jetstream Vue.

js + CRUD

BY AHMAD SAFAR @FAROPEDIA


Requirement

 1. Web Server XAMP/Laragon versi terbaru (Recommended)


 2. Google Chrome + Vue.js Devtools BETA extension (http://bit.ly/vuejsv3-devtools). untuk
Debugging Vue.js v3
 3. Composer
 4. Visual Studio Code dengan extension dibawah ini untuk meningkatkan produktivitas
dan mengurangi error typing:
 Laravel Extension Pack. Untuk linter, autocomplete typing project laravel
 Vetur. Untuk linter dan code formatting Vue.js
 Prettier. Untuk code formatting
 Tailwind CSS IntelliSense. Untuk autocomplete suggestions tailwind css class
 EditorConfig for VS Code

By Ahmad Safar - @faropedia


Installation

 Laravel v8 Installation:
https://laravel.com/docs/8.x#the-laravel-installer
 Jetstream v2 Installation: https://jetstream.laravel.com/2.x/installation.html

Before we start:
 Link storage first: php artisan storage:link
 .editorconfig: [*.{js,vue,yml,yaml}]
 webpack.mix.js:
Enable mix.version(); on development mode
Disable Laravel Notifications using mix.disableNotifications();
 config/jetstream.php: enable photo features
 config/app.php: change timezone to Asia/Jakarta
 Add role column in users migration: $table->string('role')->default('user’);
 Create database first, then: php artisan migrate, npm install, npm run hot

By Ahmad Safar - @faropedia


Authorization and Roles

 Create user resource controller with model binding:


php artisan make:controller UserController -r --model=User
 Setting basic role in Laravel controller (Server-side) using Laravel Policy:
php artisan make:policy UserPolicy --model=User
 Create user resource pages in resources/js/Pages/User
https://tailwindui.com/, http://tailwindcss.com/
 Setting basic role in Vue.js (Client-side) via Shared Data: https://inertiajs.com/shared-data
 Stop ‘npm run hot’ and use ‘npm run dev’ when done.

Advanced (next meet):


 Use spatie/laravel-permission for Roles Management

By Ahmad Safar - @faropedia


Thanks!
BY AHMAD SAFAR - @FAROPEDIA

You might also like