PHPackages                             mark-villudo/laravel-admin-panel-inertia-vue - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. mark-villudo/laravel-admin-panel-inertia-vue

ActiveLibrary[Admin Panels](/categories/admin)

mark-villudo/laravel-admin-panel-inertia-vue
============================================

Laravel package to create laravel admin panel using inertia vue

342CSS

Since Jun 27Pushed 1y ago1 watchersCompare

[ Source](https://github.com/MarkVilludo/laravel-admin-panel-inertia-vue)[ Packagist](https://packagist.org/packages/mark-villudo/laravel-admin-panel-inertia-vue)[ RSS](/packages/mark-villudo-laravel-admin-panel-inertia-vue/feed)WikiDiscussions main Synced 3d ago

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel Admin Panel Inertia Vue
===============================

[](#laravel-admin-panel-inertia-vue)

Laravel package to create laravel admin panel using inertia vue

Author for CMS Template (Credits)
---------------------------------

[](#author-for-cms-template-credits)

- [@fmhorfilla](https://www.github.com/fmhorfilla)
- [@janzcio](https://www.github.com/janzcio)

Prerequisites
-------------

[](#prerequisites)

- [Laravel Project | fresh or existing](https://laravel.com/docs/11.x/installation)
- [ Node version is above v20.10.0](https://nodejs.org/en/download/package-manager)

Installation
------------

[](#installation)

Require this package with composer.

```
    composer require "mark-villudo/laravel-admin-panel-inertia-vue @dev"
```

### Publish assets and layouts

[](#publish-assets-and-layouts)

Register Service Provider in bootstrap/providers.php

```
    MarkVilludo\AdminPanelInertiaVue\CMSServicedProvider::class,
```

### Clear cache

[](#clear-cache)

```
    php artisan optimize

```

### Publish `resources/assets` and `resources/js/Layouts`

[](#publish-resourcesassets-and-resourcesjslayouts)

```
    php artisan vendor:publish --tag=cms-assets
```

Setup
-----

[](#setup)

Setup Initial Pages in inertia (Pages, Components, etc)
-------------------------------------------------------

[](#setup-initial-pages-in-inertia-pages-components-etc)

```
    #This command installs Jetstream with server-side rendering support for Inertia.js, enhancing performance and SEO.
    php artisan jetstream:install inertia --ssr

    #This command runs all pending database migrations, creating the necessary tables and columns in the database.
    php artisan migrate
```

Setup Layouts
-------------

[](#setup-layouts)

### Step 1

[](#step-1)

Open the `resources/js/app.js` to import the assets and add following VueSweetalert2, VueTippy and Toastr for dependencies

```
    import './bootstrap';
    import '@assets/css/bootstrap/bootstrap.min.css';
    import '@assets/css/app.css';
    import '@resources/css/app.css';

    import { createApp, h } from 'vue';
    import { createInertiaApp } from '@inertiajs/vue3';
    import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
    import { ZiggyVue } from '../../vendor/tightenco/ziggy';

    const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

    import VueSweetalert2 from 'vue-sweetalert2';
    import 'sweetalert2/dist/sweetalert2.min.css';

    import { plugin as VueTippy } from 'vue-tippy';
    import 'tippy.js/dist/tippy.css';

    // Toastr initialization
    import toastr from 'toastr';
    import 'toastr/build/toastr.css';

    // Toastr does not have an install method, you might need to configure it differently.
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: 'toast-top-right',
        showDuration: '300',
        hideDuration: '1000',
        timeOut: '5000',
        extendedTimeOut: '1000',
        showEasing: 'swing',
        hideEasing: 'linear',
        showMethod: 'fadeIn',
        hideMethod: 'fadeOut'
    };

    createInertiaApp({
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ el, App, props, plugin }) {
            const app = createApp({ render: () => h(App, props) });

            app.use(plugin);
            app.use(ZiggyVue);
            app.use(VueSweetalert2); //additional
            app.use(VueTippy); //additional

            // Toastr does not have an install method. It should be configured globally.
            app.config.globalProperties.$toastr = toastr;

            app.mount(el);

            return app;
        },
        progress: {
            color: '#4B5563',
        },
    });
```

### Step 2

[](#step-2)

update `package.json` for toast in devDependencies block, and dependencies block for `lodash`, `vue-sweetalert2` and `vue-tippy`

```
    "devDependencies": {
        "toastr": "^2.1.4",
    },
    "dependencies": {
        "lodash": "^4.17.21",
        "vue-sweetalert2": "^5.0.11",
        "vue-tippy": "^6.4.1"
    }
```

### Step 3

[](#step-3)

update `vite.config.js` and add/update the ff code

```
    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';

    //additional
    import vue from "@vitejs/plugin-vue";
    import path from "path";

    export default defineConfig({
        plugins: [
            laravel({
                input: ['resources/css/app.css', 'resources/js/app.js'],
                refresh: true,
            }),
            //additionals
            vue(),
        ],
        //additionals
        resolve: {
            alias: {

                "@resources": path.resolve(__dirname, "resources"),
                "@assets": path.resolve(__dirname, "resources/assets"),
                "@public": path.resolve(__dirname, "public/assets"),
                "@mixins": path.resolve(__dirname, "resources/js/Pages/Mixins"),
            },
        },
        build: {
            rollupOptions: {
                output: {
                    assetFileNames: 'assets/[name]-[hash].[ext]',
                },
            },
        },
    });
```

### Step 4

[](#step-4)

Update the `resources/js/Layouts/AppLayout.vue`

```

                Copyright © IMSupport 2024

    import HeaderLayout from "./HeaderLayout.vue";
    import SidebarLayout from "./SidebarLayout.vue";

    export default {
        props: {
            page_title: String,
            page_icon: String
        },
        components: {
            HeaderLayout,
            SidebarLayout,
        },
    };

```

### Step 5

[](#step-5)

Add css and js dependency in `resources/views/app.blade.php`

```

        @inertia

        @vite('resources/assets/js/jquery-3.7.1.min.js')
        @vite('resources/assets/js/bootstrap/bootstrap.bundle.min.js')
        @vite('resources/assets/js/bootstrap/main.js')

```

### Step 6

[](#step-6)

Open the `resources/js/Pages/Dashboard.vue` and update the AppLayout

```
    from

    to

```

### Step 7

[](#step-7)

Run commands

```
    npm install //This command installs all dependencies listed in the package.json file of your project.
    npm run dev //runs a development server or build process specific to your project setup.
    php artisan optimize //clear cache
    php artisan serve //serve laravel application
```

### Step 8

[](#step-8)

Test it. [![alt text](https://github.com/MarkVilludo/laravel-admin-panel-inertia-vue/raw/main/img/ss.png?raw=true)](https://github.com/MarkVilludo/laravel-admin-panel-inertia-vue/blob/main/img/ss.png?raw=true)

To enable the User Management Modules
-------------------------------------

[](#to-enable-the-user-management-modules)

### Step 1

[](#step-1-1)

Publish all files from Spatie Service Provider

```
    php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
```

Then publish all files from our package for User Management

```
    php artisan vendor:publish --tag=cms-usermanagement
```

Then run this command to clear cache for routes and others

```
    php artisan optimize:clear
```

### Step 2

[](#step-2-1)

Include this in `routes/web.php`

```
    // Include user management routes/web.php
    include __DIR__.'/usermanagement.php';
```

### Step 3

[](#step-3-1)

Update the `Models/User.php`, add this following code for spatie and guard name

```
    use Spatie\Permission\Traits\HasRoles;

    use HasRoles;

    public $guard_name = 'sanctum';
```

### Step 4

[](#step-4-1)

Then add this to `database/DatabaseSeeder`

```
    $this->call(PermissionSeeder::class);
    $this->call(RoleSeeder::class);
    $this->call(UserSeeder::class);
```

### Step 5

[](#step-5-1)

Run migrate refresh and seed initial user, role, and permissions data

```
    php artisan optimize:clear
    php artisan migrate:fresh
    php artisan db:seed
```

### Step 6

[](#step-6-1)

Update the `app\Http\Middleware\HandleInertiaRequests.php`

```
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'user.permissions' => function () use ($request) {
                return ( $request->user() ? $request->user()->getAllPermissions()->pluck('name') : null );
            },
            'user.roles' => function () use ($request) {
                return ( $request->user() ? $request->user()->roles()->pluck('name') : null );
            },
            'user.locale' => function () use ($request) {
                return session('locale');
            },
        ]);
    }
```

### Step 7

[](#step-7-1)

Update the `Resources/js/Pages/SidebarLayouts.vue` to include the Users, Roles, and Permissions Module

```

            User Management

            Roles

            Permissions

```

### Step 8

[](#step-8-1)

Test it.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

18

—

LowBetter than 8% of packages

Maintenance36

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity15

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/fc1f7cec431adffc9b18bb57feee89c5955317e8369c82e3cbf2b786dacb225f?d=identicon)[Mark Villudo](/maintainers/Mark%20Villudo)

---

Top Contributors

[![MarkVilludo](https://avatars.githubusercontent.com/u/16302633?v=4)](https://github.com/MarkVilludo "MarkVilludo (63 commits)")

### Embed Badge

![Health badge](/badges/mark-villudo-laravel-admin-panel-inertia-vue/health.svg)

```
[![Health](https://phpackages.com/badges/mark-villudo-laravel-admin-panel-inertia-vue/health.svg)](https://phpackages.com/packages/mark-villudo-laravel-admin-panel-inertia-vue)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)