How to implement a dynamic sidebar menu in Laravel and Vue.js



Image not found!!

Implementing a dynamic sidebar menu in Laravel and Vue.js involves a combination of server-side and client-side code. Laravel will handle the server-side logic, while Vue.js will be used for the dynamic behavior on the client side. Here is a step-by-step guide:

Step 1: Set Up Laravel

Make sure you have Laravel installed. You can install it using Composer:

bash
composer create-project --prefer-dist laravel/laravel your-project-name
cd your-project-name

Step 2: Create a Model and Migration

Create a model and migration for your menu items:

bash
php artisan make:model MenuItem -m

Edit the migration file to define the structure of your menu_items table.

php
// database/migrations/xxxx_xx_xx_create_menu_items_table.php

public function up()
{
    Schema::create('menu_items', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('url');
        $table->integer('parent_id')->nullable();
        $table->timestamps();
    });
}

Run the migration:

bash
php artisan migrate

Step 3: Create Seeder

Create a seeder to populate some sample data into the menu_items table.

bash
php artisan make:seeder MenuItemsTableSeeder

Edit the seeder file (database/seeders/MenuItemsTableSeeder.php) to add sample data:

php
use Illuminate\Database\Seeder;
use App\Models\MenuItem;

class MenuItemsTableSeeder extends Seeder
{
    public function run()
    {
        MenuItem::create([
            'name' => 'Home',
            'url' => '/',
        ]);

        MenuItem::create([
            'name' => 'About',
            'url' => '/about',
        ]);

        // Add more menu items as needed
    }
}

Run the seeder:

bash
php artisan db:seed --class=MenuItemsTableSeeder

Step 4: Create API Routes

Create API routes in routes/api.php to fetch menu items:

php
// routes/api.php

use App\Http\Controllers\MenuItemController;

Route::get('/menu-items', [MenuItemController::class, 'index']);

Step 5: Create a Controller

Create a controller to handle menu item requests:

bash
php artisan make:controller MenuItemController

Edit the controller file (app/Http/Controllers/MenuItemController.php) to fetch menu items:

php
use App\Models\MenuItem;

class MenuItemController extends Controller
{
    public function index()
    {
        $menuItems = MenuItem::all();

        return response()->json($menuItems);
    }
}

Step 6: Set Up Vue.js

Install Vue.js and Vue Router:

bash
npm install vue vue-router

Create a Vue component for the sidebar:

bash
mkdir resources/js/components

touch resources/js/components/Sidebar.vue

Edit resources/js/components/Sidebar.vue:

html
<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <router-link :to="item.url">{{ item.name }}</router-link>
        <sidebar v-if="item.children" :menu-items="item.children"></sidebar>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['menuItems'],
};
</script>

Step 7: Set Up Vue Router

Edit resources/js/app.js:

javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Sidebar from './components/Sidebar.vue';

Vue.use(VueRouter);

const routes = [
  // Define your routes here
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

const app = new Vue({
  el: '#app',
  router,
  components: {
    Sidebar,
  },
});

Step 8: Display the Sidebar in Blade Template

Edit resources/views/welcome.blade.php:

php
@extends('layouts.app')

@section('content')
  <div id="app">
    <sidebar :menu-items="{{ json_encode($menuItems) }}"></sidebar>
    <!-- Your main content goes here -->
  </div>
@endsection

Step 9: Run the Application

Run the development server:

bash
php artisan serve

Run the npm watch command:

bash
npm run watch

Visit http://localhost:8000 in your browser, and you should see your dynamic sidebar.

This is a basic setup, and you can customize it further based on your specific requirements. Additionally, you might want to add authentication and authorization checks, error handling, and other features depending on your application needs.

Category List