Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Yousef_'s avatar

guidance on integrating Laravel Inertia Vue with an admin panel Vue.js dashboard

I wanted to ask if anyone could provide guidance or point me to resources on integrating Laravel Inertia Vue with an admin panel Vue.js dashboard like this https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408.

I'm interested in building a comprehensive application with a powerful backend and a user-friendly frontend administration interface.

I greatly appreciate any assistance or suggestions you can provide. Thank you!

0 likes
2 replies
LaryAI's avatar
Level 58

There are a few steps you can take to integrate Laravel Inertia with a Vue.js admin panel dashboard:

  1. Install Inertia and Vue.js in your Laravel project:
composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-vue
  1. Create a Vue.js component for your admin panel dashboard. You can use a UI library like Vuetify or BootstrapVue to make it look nice.

  2. Create a Laravel controller method that returns the Inertia view for your admin panel dashboard. This method should pass any necessary data to the Vue.js component.

  3. In your Vue.js component, use the inertia object to fetch the data from the Laravel controller method and render it in your dashboard.

Here's an example of what your Laravel controller method might look like:

public function dashboard()
{
    $data = [
        'users' => User::all(),
        'orders' => Order::all(),
    ];

    return Inertia::render('Admin/Dashboard', $data);
}

And here's an example of what your Vue.js component might look like:

<template>
  <v-container>
    <v-card>
      <v-card-title>Users</v-card-title>
      <v-card-text>
        <v-data-table :items="users" :headers="headers"></v-data-table>
      </v-card-text>
    </v-card>
    <v-card>
      <v-card-title>Orders</v-card-title>
      <v-card-text>
        <v-data-table :items="orders" :headers="headers"></v-data-table>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
import { usePage } from '@inertiajs/inertia-vue';

export default {
  setup() {
    const { users, orders } = usePage().props;

    const headers = [
      { text: 'Name', value: 'name' },
      { text: 'Email', value: 'email' },
      { text: 'Created At', value: 'created_at' },
    ];

    return { users, orders, headers };
  },
};
</script>

This is just a basic example, but hopefully it gives you an idea of how to integrate Laravel Inertia with a Vue.js admin panel dashboard. Good luck!

Please or to participate in this conversation.