Today we are going to learn Vue Js Roles and Permissions + Vite Js with Example in laravel 9. This tutorial will cover on how to create vue js roles and permission application with vite js.
What we are going to use (Built with)?
- Laravel 9
- spatie/laravel-permission
- Laravel Breeze
- Vue.js
- Inertiajs
Also Read: Laravel 9 Stripe Payment Gateway Integration Example
Steps for Laravel 9 Vue Js Roles and Permissions + Vite Js Example:
- Step 1: Installing fresh new Laravel 9 Application
- Step 2: Installing Laravel Breeze and Vue JS
- Step 3: Installing spatie/laravel-permission package
- Step 4: Creating and Updating Model
- Step 5: Creating Routes
- Step 6: Creating Controllers
- Step 7: Creating and Updating Vue Files
- Step 8: Creating seeder file for Roles and Permissions / Dummy Post
- Step 9: Testing
- Step 10: Conclusion
Also Read: Laravel 9 integrate Razorpay Payment Gateway
Step 1: Installing fresh new Laravel 9 Application
Firstly, we are going to install a fresh new laravel 9 application. To install a laravel 9 application run the following command in terminal.
composer create-project laravel/laravel vue-example-app
cd vue-example-app

Step 2: Installing Laravel Breeze and Vue JS
Then cd
to project directory and install Breeze with Vue option. To install a breeze run the following command.
composer require laravel/breeze --dev

Then we are going to install vue. Run the following command to install it.
php artisan breeze:install vue

Then install npm
npm install
Then run the migration. (Before migration, please create database and then enter the database details to .env file)

php artisan migrate
Also Read: How to Use Charts.JS in Laravel 9
Step 3: Installing spatie/laravel-permission package
Now it’s time to install spatie/laravel-permission package for our roles and permission application. To install a spatie/laravel-permission package run the following command in terminal. You can also read the spatie/laravel-permission package original document here.
composer require spatie/laravel-permission

You should publish the migration and the config/permission.php config file with:
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

If you’ve been caching configurations locally, clear your config cache with either of these commands:
php artisan optimize:clear
# or
php artisan config:clear
Run the migrations
php artisan migrate
Also Read: Laravel 9 JetStream Livewire CRUD Operations Tutorial
Step 4: Creating and Updating Model
Now we are going to create model for role, permission and post. Create a model file as show below inside app/Models folder and enter the following code.
Role.php
<?php
namespace App\Models;
use Spatie\Permission\Models\Role as OriginalRole;
class Role extends OriginalRole
{
protected $fillable = [
'name',
'guard_name',
'updated_at',
'created_at',
];
}
Permission.php
<?php
namespace App\Models;
use Spatie\Permission\Models\Permission as OriginalPermission;
class Permission extends OriginalPermission
{
protected $fillable = [
'name',
'guard_name',
'updated_at',
'created_at',
];
}
We need to create a post with table. Run the following code to create a Post model with migration.
php artisan make:model Post --migration
Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
}
And update the post table which can be found in database/migrations folder.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->longText('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};

and update the user model with the following code.
User.php
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
use Spatie\Permission\Traits\HasRoles;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
use HasRoles;
/**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/
protected $fillable = [
'name',
'email',
'password',
];
/**
* The attributes that should be hidden for serialization.
*
* @var array<int, string>
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast.
*
* @var array<string, string>
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
}
Also Read: How to Autocomplete Search using Typeahead Js in Laravel 9
Step 5: Creating Routes
In this step, we are going to create routes for our application. Update the routes as show below routes/web.php file.
<?php
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return Inertia::render('Welcome', [
'canLogin' => Route::has('login'),
'canRegister' => Route::has('register'),
'laravelVersion' => Application::VERSION,
'phpVersion' => PHP_VERSION,
]);
})->name('home');
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
require __DIR__.'/auth.php';
Route::group([
'namespace' => 'App\Http\Controllers\Admin',
'prefix' => 'admin',
'middleware' => ['auth'],
], function () {
Route::resource('user', 'UserController');
Route::resource('role', 'RoleController');
Route::resource('permission', 'PermissionController');
Route::resource('post', 'PostController');
});
Step 6: Creating Controllers
Now we are going to create a controllers file. So create a list of controller file as show below and enter the following code.

First create a folder Admin inside app/Http/Controllers/ and add the following file inside it.
app/Http/Controllers/Admin/UserController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Inertia\Inertia;
class UserController extends Controller
{
public function __construct()
{
$this->middleware('can:user list', ['only' => ['index', 'show']]);
$this->middleware('can:user create', ['only' => ['create', 'store']]);
$this->middleware('can:user edit', ['only' => ['edit', 'update']]);
$this->middleware('can:user delete', ['only' => ['destroy']]);
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$users = (new User)->newQuery();
$users->latest();
$users = $users->paginate(100)->onEachSide(2)->appends(request()->query());
return Inertia::render('Admin/User/Index', [
'users' => $users,
'can' => [
'create' => Auth::user()->can('user create'),
'edit' => Auth::user()->can('user edit'),
'delete' => Auth::user()->can('user delete'),
]
]);
}
}
app/Http/Controllers/Admin/RoleController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\Role;
use Illuminate\Support\Facades\Auth;
use Inertia\Inertia;
class RoleController extends Controller
{
public function __construct()
{
$this->middleware('can:role list', ['only' => ['index', 'show']]);
$this->middleware('can:role create', ['only' => ['create', 'store']]);
$this->middleware('can:role edit', ['only' => ['edit', 'update']]);
$this->middleware('can:role delete', ['only' => ['destroy']]);
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$roles = (new Role)->newQuery();
$roles->latest();
$roles = $roles->paginate(100)->onEachSide(2)->appends(request()->query());
return Inertia::render('Admin/Role/Index', [
'roles' => $roles,
'can' => [
'create' => Auth::user()->can('role create'),
'edit' => Auth::user()->can('role edit'),
'delete' => Auth::user()->can('role delete'),
]
]);
}
}
app/Http/Controllers/Admin/PermissionController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\Permission;
use Illuminate\Support\Facades\Auth;
use Inertia\Inertia;
class PermissionController extends Controller
{
public function __construct()
{
$this->middleware('can:permission list', ['only' => ['index', 'show']]);
$this->middleware('can:permission create', ['only' => ['create', 'store']]);
$this->middleware('can:permission edit', ['only' => ['edit', 'update']]);
$this->middleware('can:permission delete', ['only' => ['destroy']]);
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$permissions = (new Permission)->newQuery();
$permissions->latest();
$permissions = $permissions->paginate(100)->onEachSide(2)->appends(request()->query());
return Inertia::render('Admin/Permission/Index', [
'permissions' => $permissions,
'can' => [
'create' => Auth::user()->can('permission create'),
'edit' => Auth::user()->can('permission edit'),
'delete' => Auth::user()->can('permission delete'),
]
]);
}
}
app/Http/Controllers/Admin/PostController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Inertia\Inertia;
class PostController extends Controller
{
public function __construct()
{
$this->middleware('can:post list', ['only' => ['index', 'show']]);
$this->middleware('can:post create', ['only' => ['create', 'store']]);
$this->middleware('can:post edit', ['only' => ['edit', 'update']]);
$this->middleware('can:post delete', ['only' => ['destroy']]);
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$posts = (new Post)->newQuery();
$posts->latest();
$posts = $posts->paginate(100)->onEachSide(2)->appends(request()->query());
return Inertia::render('Admin/Post/Index', [
'posts' => $posts,
'can' => [
'create' => Auth::user()->can('post create'),
'edit' => Auth::user()->can('post edit'),
'delete' => Auth::user()->can('post delete'),
]
]);
}
}
Also Read: How to Create PDF File in Laravel 9?
Step 7: Creating and Updating Vue Files
Now we are going to create and update some file in our laravel application. Open resources/js/Layouts/Authenticated.vue file and update the following code.
Search for <!– Navigation Links -> change the code as show below for it.
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<BreezeNavLink :href="route('home')" :active="route().current('home')">
Home
</BreezeNavLink>
<BreezeNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</BreezeNavLink>
<BreezeNavLink :href="route('user.index')" :active="route().current('user.index')">
Users
</BreezeNavLink>
<BreezeNavLink :href="route('permission.index')" :active="route().current('permission.index')">
Permission
</BreezeNavLink>
<BreezeNavLink :href="route('role.index')" :active="route().current('role.index')">
Role
</BreezeNavLink>
<BreezeNavLink :href="route('post.index')" :active="route().current('post.index')">
Post
</BreezeNavLink>
<a class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out" href="https://laraveltuts.com" :class="classes">
LaravelTuts
</a>
</div>

Now a new folder Admin inside resources/js/Pages/ and create a file and folder as show below and enter the code.

resources/js/Pages/Admin/User/Index.vue
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
const props = defineProps({
users: {
type: Object,
default: () => ({}),
},
can: {
type: Object,
default: () => ({}),
},
})
</script>
<template>
<Head title="Users" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Users
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-5">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="flex bg-gray-800 justify-between items=center p-5">
<div class="flex space-x-2 items-center text-white">
Users Settings Page! Here you can list, create, update or delete user!
</div>
<div class="flex space-x-2 items-center" v-if="can.create">
<a href="#" class="px-4 py-2 bg-green-500 uppercase text-white rounded focus:outline-none flex items-center"><span class="iconify mr-1" data-icon="gridicons:create" data-inline="false"></span> Create User</a>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-2">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">Name</th>
<th scope="col" class="py-3 px-6">Email</th>
<th v-if="can.edit || can.delete" scope="col" class="py-3 px-6">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users.data" :key="user.id" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td data-label="Name" class="py-4 px-6">
{{ user.name }}
</td>
<td data-label="Email" class="py-4 px-6">
{{ user.email }}
</td>
<td
v-if="can.edit || can.delete"
class="py-4 px-6"
>
<div type="justify-start lg:justify-end" no-wrap>
<BreezeButton class="ml-4 bg-green-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.edit">
Edit
</BreezeButton>
<BreezeButton class="ml-4 bg-red-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.delete">
Delete
</BreezeButton>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
resources/js/Pages/Admin/Role/Index.vue
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
const props = defineProps({
roles: {
type: Object,
default: () => ({}),
},
can: {
type: Object,
default: () => ({}),
},
})
</script>
<template>
<Head title="Role" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Role
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-5">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="flex bg-gray-800 justify-between items=center p-5">
<div class="flex space-x-2 items-center text-white">
Role Settings Page! Here you can list, create, update or delete role!
</div>
<div class="flex space-x-2 items-center" v-if="can.create">
<a href="#" class="px-4 py-2 bg-green-500 uppercase text-white rounded focus:outline-none flex items-center"><span class="iconify mr-1" data-icon="gridicons:create" data-inline="false"></span> Create Role</a>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-2">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">Name</th>
<th v-if="can.edit || can.delete" scope="col" class="py-3 px-6">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="role in roles.data" :key="role.id" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td data-label="Name" class="py-4 px-6">
{{ role.name }}
</td>
<td
v-if="can.edit || can.delete"
class="py-4 px-6"
>
<div type="justify-start lg:justify-end" no-wrap>
<BreezeButton class="ml-4 bg-green-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.edit">
Edit
</BreezeButton>
<BreezeButton class="ml-4 bg-red-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.delete">
Delete
</BreezeButton>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
resources/js/Pages/Admin/Permission/Index.vue
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
const props = defineProps({
permissions: {
type: Object,
default: () => ({}),
},
can: {
type: Object,
default: () => ({}),
},
})
</script>
<template>
<Head title="Permission" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Permission
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-5">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="flex bg-gray-800 justify-between items=center p-5">
<div class="flex space-x-2 items-center text-white">
Permission Settings Page! Here you can list, create, update or delete permission!
</div>
<div class="flex space-x-2 items-center" v-if="can.create">
<a href="#" class="px-4 py-2 bg-green-500 uppercase text-white rounded focus:outline-none flex items-center"><span class="iconify mr-1" data-icon="gridicons:create" data-inline="false"></span> Create Permission</a>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-2">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">Name</th>
<th v-if="can.edit || can.delete" scope="col" class="py-3 px-6">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="permission in permissions.data" :key="permission.id" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td data-label="Name" class="py-4 px-6">
{{ permission.name }}
</td>
<td
v-if="can.edit || can.delete"
class="py-4 px-6"
>
<div type="justify-start lg:justify-end" no-wrap>
<BreezeButton class="ml-4 bg-green-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.edit">
Edit
</BreezeButton>
<BreezeButton class="ml-4 bg-red-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.delete">
Delete
</BreezeButton>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
resources/js/Pages/Admin/Post/Index.vue
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
const props = defineProps({
posts: {
type: Object,
default: () => ({}),
},
can: {
type: Object,
default: () => ({}),
},
})
</script>
<template>
<Head title="Post" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Post
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-5">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="flex bg-gray-800 justify-between items=center p-5">
<div class="flex space-x-2 items-center text-white">
Post Settings Page! Here you can list, create, update or delete post!
</div>
<div class="flex space-x-2 items-center" v-if="can.create">
<a href="#" class="px-4 py-2 bg-green-500 uppercase text-white rounded focus:outline-none flex items-center"><span class="iconify mr-1" data-icon="gridicons:create" data-inline="false"></span> Create Post</a>
</div>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mb-2">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">Title</th>
<th scope="col" class="py-3 px-6">Description</th>
<th v-if="can.edit || can.delete" scope="col" class="py-3 px-6">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts.data" :key="post.id" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<td data-label="Title" class="py-4 px-6">
{{ post.title }}
</td>
<td data-label="Title" class="py-4 px-6">
{{ post.description }}
</td>
<td
v-if="can.edit || can.delete"
class="py-4 px-6 w-48"
>
<div type="justify-start lg:justify-end" no-wrap>
<BreezeButton class="ml-4 bg-green-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.edit">
Edit
</BreezeButton>
<BreezeButton class="ml-4 bg-red-500 px-2 py-1 rounded text-white cursor-pointer" v-if="can.delete">
Delete
</BreezeButton>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
Also Read: Laravel 9 Import Export Excel & CSV File to Database Example
Step 8: Creating seeder file for Roles and Permissions / Dummy Post
Now we are going to create a seeder file for roles and permissions and for creating a dummy posts. Create a BasicAdminPermissionSeeder.php inside database/seeders folder and enter the following code.
database/seeders/BasicAdminPermissionSeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Spatie\Permission\Models\Permission;
use Spatie\Permission\Models\Role;
use Spatie\Permission\PermissionRegistrar;
class BasicAdminPermissionSeeder extends Seeder
{
/**
* Create the initial roles and permissions.
*
* @return void
*/
public function run()
{
// Reset cached roles and permissions
app()[PermissionRegistrar::class]->forgetCachedPermissions();
// create permissions
$permissions = [
'permission list',
'permission create',
'permission edit',
'permission delete',
'role list',
'role create',
'role edit',
'role delete',
'user list',
'user create',
'user edit',
'user delete',
'post list',
'post create',
'post edit',
'post delete',
];
foreach ($permissions as $permission) {
Permission::create(['name' => $permission]);
}
// create roles and assign existing permissions
$role1 = Role::create(['name' => 'writer']);
$role1->givePermissionTo('permission list');
$role1->givePermissionTo('role list');
$role1->givePermissionTo('user list');
$role1->givePermissionTo('post list');
$role1->givePermissionTo('post create');
$role1->givePermissionTo('post edit');
$role1->givePermissionTo('post delete');
$role2 = Role::create(['name' => 'admin']);
foreach ($permissions as $permission) {
$role2->givePermissionTo($permission);
}
$role3 = Role::create(['name' => 'super-admin']);
// gets all permissions via Gate::before rule; see AuthServiceProvider
// create demo users
$user = \App\Models\User::factory()->create([
'name' => 'Super Admin',
'email' => 'superadmin@laraveltuts.com',
]);
$user->assignRole($role3);
$user = \App\Models\User::factory()->create([
'name' => 'Admin User',
'email' => 'admin@laraveltuts.com',
]);
$user->assignRole($role2);
$user = \App\Models\User::factory()->create([
'name' => 'Example User',
'email' => 'test@laraveltuts.com',
]);
$user->assignRole($role1);
}
}
For Super-Admin gets all permissions via Gate::before rule; update AuthServiceProvider file.
app/Providers/AuthServiceProvider.php
<?php
namespace App\Providers;
// use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Gate;
class AuthServiceProvider extends ServiceProvider
{
/**
* The model to policy mappings for the application.
*
* @var array<class-string, class-string>
*/
protected $policies = [
// 'App\Models\Model' => 'App\Policies\ModelPolicy',
];
/**
* Register any authentication / authorization services.
*
* @return void
*/
public function boot()
{
$this->registerPolicies();
// Implicitly grant "Super-Admin" role all permission checks using can()
Gate::before(function ($user, $ability) {
if ($user->hasRole(env('APP_SUPER_ADMIN', 'super-admin'))) {
return true;
}
});
}
}
Now create a PostSeeder for creating a dummy post for our application.
database/seeders/PostSeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
class PostSeeder extends Seeder
{
/**
* Create the initial roles and permissions.
*
* @return void
*/
public function run()
{
$faker = \Faker\Factory::create();
for($count=0;$count<10;$count++){
DB::table('posts')->insert([
'title' => $faker->text($maxNbChars = 50),
'description' => $faker->text($maxNbChars = 200),
]);
}
}
}
Now open DatabaseSeeder.php and update the following code.
public function run()
{
$this->call(BasicAdminPermissionSeeder::class);
$this->call(PostSeeder::class);
}
Now run the fresh migration with seed.
php artisan migrate:fresh --seed

Also Read: How to Upload Image in Laravel 9?
Step 9: Testing
Now, Everything is done! we can now test our application. Run the following command to start the laraver server.
php artisan serve
also keep running vite.
npm run dev
Now open the following URL in web browser to test our applicaition.
http://127.0.0.1:8000/
So now, you can login with the following details:
Super Admin:
superadmin@laraveltuts.com
password
Admin:
admin@laraveltuts.com
password
Writer:
test@laraveltuts.com
password
Previews:






Step 10: Conclusion
Today, We had learn Laravel 9 Vue Js Roles and Permission + Vite Js with Example. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.
[…] Also Read: Laravel 9 Vue Js Roles and Permissions + Vite Js […]
[…] Also Read: Laravel 9 Vue Js Roles and Permissions + Vite Js […]
[…] Also Read: Laravel 9 Vue Js Roles and Permissions + Vite Js […]