在没有路由器链接的 Laravel 8 中使用“vue-sidebar-menu”的问题

Question

Please help me fix this problem. I create application using Laravel 8, Blade templates and Vue 3 components. In that i have basic routing in Laravel. I want to add nice looking menu in admin panel https://github.com/yaminncco/vue-sidebar-menu .

Unfortunately, I don't know how to pass my menu structure to this component. When I use the example from the documentation I get an error

Failed to resolve component: router-link

I dont use router in Vue. I see in documentation example with Customize link with InertiaJa but i dont know how use it because i dont use and know InertiaJS.

My simple MainMenu.vue component code:

<template>
<SidebarMenu  :menu="menu"></SidebarMenu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
  name: "MainMenu",
  components: {
    SidebarMenu
  },
  data() {
    return {
      menu: [
        {
          header: 'Main Navigation',
          hiddenOnCollapse: true
        },
        {
          href: '/',
          title: 'Dashboard',
          icon: 'fa fa-user'
        },
        {
          href: '/charts',
          title: 'Charts',
          icon: 'fa fa-chart-area',
          child: [
            {
              href: '/charts/sublink',
              title: 'Sub Link'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped>

</style>

Answer 1

Ok, I found a solution to the problem. Need to add own code which create\render simple link in html

in app.js add:

/*remaining application code*/
import { createApp, h } from "vue";
const customLink = {
    name: 'CustomLink',
    props: ['item'],
    render() {
        return h('a', this.$slots.default())
    }
}

const app = createApp({});
app.component('custom-link', customLink)

/*remaining application code*/

and in Vue Component:

<SidebarMenu :menu="menu" :link-component-name="'custom-link'"></SidebarMenu>