How i can use in Laravel? WIthout router-link

[Grzyb9k]

I use Laravel 8 with Vue 3 components in Blade Templates, without inertiajs and use only routing from Laravel. When i try use vue-sidebar-menu i get error:

Failed to resolve component: router-link

My simple code MainMenu.vue component:

<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>

I don't know how to pass my menu structure to this component. How i can fix it and use vue-sidebar-menu ???? Please help.

[yaminncco]

Create a custom link component then pass the name through link-component-name prop. check documentation here https://github.com/yaminncco/vue-sidebar-menu#customize-link

[CaptainCannabis]

I created this very basic link component

<template>
  <a
    v-bind="$attrs"
  >
  <div class="vsm--title">
    <slot />
  </div>  
  </a>
</template>

<script>
    export default {
        name: 'CustomLink',
        props: ['item'],
    };
</script>

And then in my Component/Page which uses the sidebar-menu did the following:

    <sidebar-menu
        style="grid-area: content_left"
        ref="sidebar"
        class="vsm_fc-theme"
        :menu="NavbarConfig.menu"
        :link-component-name="'custom-link'"
        @item-click="onItemClick($event)" 
        @update:collapsed="NavbarConfig.sidebarToggle"
        :collapsed="!sidebaractive"
        :disable-hover="false"
        width-collapsed="50px"
        width="300px"
        :relative="false"
    >
        <template v-slot:header class="menuheader">
            <div class="menuheader">
                <cog-icon class="icon"></cog-icon>
                <span class="title">{{ $t('lang.settings') }}</span>
            </div>
        </template>
        <template v-slot:toggle-icon>
            <i class="fc right"></i>
            <span class="hint">{{ $t('lang.close') }}</span>
        </template>
    </sidebar-menu>

    ....
    <script>
        import { SettingsNavbar } from "Assets/Config/SettingsSidebar.js";
        ....
       export default {
           setup() {
                app.component('customLink',customLink); // app is exposed to window scope in my app.js, guess you could pass it to the components slot also
            }