Data is not fetching in Vue component using laravel9 inertia

Question

i am loading menu and submenu from database to Vue component using laravel9 Inertia vue3 vite3
here is my Vue component .i tried console.log not showing any data for sidebar .how i can load my category and subcategory in my sidebar ? components are exist in directory Resources/js/Pages/Admin/Shared/Sidebar.vue

<template>

</template>

in setup props console.log is not giving values . in controller i have checked values are rendering properly usin dd($sidebar)

<script>
  import { ref } from 'vue';
  import { Link } from '@inertiajs/inertia-vue3';

  export default {
    name: 'Sidebar',
    props: {
      sidebar: {
        type: Array,
        required: true,
      },
      isDarkMode: {
        type: Boolean,
        default: false,
      },
    },
    setup(props) {
      console.log(props.sidebar);
      const state = {
        openCategories: ref([]),
      };

      const toggleCategory = (categoryId) => {
        if (state.openCategories.value.includes(categoryId)) {
          state.openCategories.value = state.openCategories.value.filter((id) => id !== categoryId);
        } else {
          state.openCategories.value = [...state.openCategories.value, categoryId];
        }
      };

      return {
        state,
        toggleCategory,
      };
    },
  };
</script>

here is my controller it will pass sidebar array to component

<?php
namespace App\Http\Controllers;

use App\Models\Sidebar;
use Illuminate\Http\Request;
use Inertia\Inertia;

class SidebarController extends Controller
{
    public function index()
    {
        $sidebar = Sidebar::with('subcategories')->whereNull('parent_id')->get();
          // dd($sidebar->first());

       return Inertia::render('Admin/Index', [
            'sidebar' => $sidebar,
            'isDarkMode' => false,
        ]);


    }
}

Answer 1

I think your are trying to render on wrong component 'Admin/Index' in your controller. 'Sidebar' component file suppose to be index.vue in Admin folder, if not you have to bind your data to 'Sidebar' component from Admin/Index.vue.

I suggest you have to use share feature where inertia provide in order to share your menu data throughout your application.

please refer to Shared Data if interested :